React - 未在初始化时设置状态

Question

我在我的产品组件中有这个代码，用于将收到的道具分配给当我创建新产品时未分配此状态的状态，并通过更改产品列表的状态并因此重新加载产品甚至现有对象在父级上呈现它，除非您先加载页面然后刷新它，否则不会显示颜色和大小。

实施如下：

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

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

2）它们作为props传递给组件的父类，如下所示：

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

3）它们应该在产品类中设置如下：

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

}

Answer 1

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

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

Answer 2

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

React: You probably don't need derived state

如果你绝对必须，你可以尝试一下：

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