0

我有一个带有组件的页面。我希望能够根据数据为组件提供自定义值。如果我们看这个屏幕截图

这里有 2 个组件

有 2 个相同的组件被调用。顶部有一个带有值的键，底部是一个带有值的键。顶部组件 Submitted 的值为 50，而底部组件 Submitted 的值为 100。

它将通过从某个地方检索数据来更新（还没有想到在哪里，但它肯定不会被硬编码）。

这就是我设置该组件的方式。

import React, { Component } from 'react'



export class SwatchElement extends Component {
    constructor(props){   
        super(props); 
        this.state = {
            Submitted: this.props.Submitted, // Submitted : this.props.Submitted 
            Redeemed: 50,
            PaymentInProgress: 85,
            PaymentFailed:25,
            Settled:60,
            Expired:10,
        }
        }


    render() {
        return (
            <div>
                <div class="list-container">
                  <ul class="swatch">
                      <li class="swatch__elem" name="Submitted">Submitted <span class="used-space">{this.state.Submitted}</span></li>
                      <li class="swatch__elem" name="Redeemed">Redeemed <span class="used-space">{this.state.Redeemed}</span></li>
                      <li class="swatch__elem" name="Payment Inprogress">Payment Inprogress <span class="used-space">{this.state.PaymentInProgress}</span></li>
                      <li class="swatch__elem" name="Payment Failed">Payment Failed <span class="used-space">{this.state.PaymentFailed}</span></li>
                      <li class="swatch__elem" name="Settled">Settled <span class="used-space">{this.state.Settled}</span></li>
                      <li class="swatch__elem" name="Expired" style={{paddingrRight: '15px'}}>Expired <span class="used-space">{this.state.Expired}</span></li>

                  </ul>
              </div>
            </div>
        )
    }
}

export default SwatchElement

现在，当我想更改值时，我在父组件中分配了这样的值

<div class="row">
              <SwatchElement Submitted={x}/>
              <SwatchElement Submitted={100}/>
          </div>

看起来它正在做我想做的事情，但我不知道这是否是正确的做法。有什么意见或建议吗？

4

1 回答 1

0

这种方法：

 this.state = {
            Submitted: this.props.Submitted, // Submitted : this.props.Submitted 
            Redeemed: 50,
            PaymentInProgress: 85,
            PaymentFailed:25,
            Settled:60,
            Expired:10,
 }

the props.Submitted 有一个缺点，在组件渲染后尝试更改，您会看到仍然旧值，因为组件构造函数在创建组件时运行一次。因此，当组件更新时，您的代码中没有地方可以将新的道具复制到状态。

如果您不关心道具是否会更新，则可以这样。

如果您确实关心更新的道具，有办法做到这一点，但通常建议避免使用派生状态。使用派生状态可能会很棘手，因为您必须将状态与道具同步，因此一种方法是避免将道具完全复制到状态（如果可能的话）并直接使用道具；例如this.props.Submitted在渲染中使用。

于 2019-11-11T20:23:24.467 回答