React - 初始化时未设置状态答案

【问题标题】：React - State not being set on initializationReact - 初始化时未设置状态
【发布时间】：2019-09-02 23:37:49
【问题描述】：

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

实现如下：

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

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

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

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

3) 他们应该在产品类中设置如下：

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

}

【问题讨论】：

您能否向我们展示您如何尝试使用此状态的代码（因为您说它们没有出现）？
我能问一下为什么你的 componentWillReceiveProps 是异步的吗？
{this.state.colorsPicked.map(color => ())} { this.state.newProductSizes.map(size => ( ))}
@dorriz idk 我只是从某个异步的地方复制了它，删除异步并不能解决任何问题
从 React 文档开始，componentWillReceiveProps 被认为是不安全的 (reactjs.org/docs/…)，建议避免使用它。我会建议在构造函数中初始化状态。施工期间道具已经到位。

标签： javascript reactjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

React: You probably don't need derived state

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

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

【讨论】：