Question

我的产品组件中有此代码，可以将收到的道具分配给某个州当我创建新产品并通过更改“产品”列表的状态并在父级上呈现它，从而重新加载产品（甚至对于现有对象）时，不会分配此状态，除非您首先加载页面，否则不会出现颜色和尺寸然后刷新它。

实现如下：

1）它们是在产品类别的状态下定义的

 this.state = {
  colorsPicked: [],
  newProductSizes: []
};

2）它们作为组件在组件的 parent 类中传递，如下所示：

           <Product
            colors={product.colors}
            sizes={product.sizes}
            updateProducts={this.updateProducts}
          />

3）假定它们在产品类中的设置如下：

async componentWillReceiveProps(props) {
 this.setState({
  colorsPicked: props.colors,
  newProductSizes: props.sizes
});

}

Answer 1

我认为最好的答案应该在这里：

React: You probably don't need derived state

如果绝对必须，您可以尝试以下操作：

static getDerivedStateFromProps() 此方法将在每个渲染（包括第一个渲染）之前运行。

Answer 2

尝试通过构造函数设置它们：

class Item extends Component {
    constructor(props) {
        this.state = {
            colorsPicked: props.colors,
            newProductSizes: props.sizes
        }
    }
}

反应-初始化时未设置状态

2 个答案: