Question

c x : C x x refl

这是我的组件代码的一部分。我们刚才采用了Eslint。此代码将引发错误“必须使用解构状态分配（反应/解构分配）”。如何修复它们？？？我们的团队不想关闭该代码的托管规则（react / distructuring-assignment）。

Answer 1

首先，用道具初始化状态不是一个好主意。实际上它是一个React反模式。您可以使用反应生命周期方法componentWillReceiveProps实现这一目标。

现在要回答您的实际问题，您可能需要保存一系列图像，如下所示：

constructor(props) {
    this.state = {images: []}
}

// props.images contains this array ["image0", "image1", "image2", "image3", "image4"]

componentWillReceiveProps(nextProps){
  if (nextProps.images !== this.props.images) {
     this.setState({ images: nextProps.images })
  }
}

render(){
  const { data } = this.state;
  const List = data.map((item, index) => {

    const { images } = this.state; // destruct images property from this.state

    return (
      <Card 
        key={index}
        data={item}
        preview={images[index]}
      />
    );
  })
}

如何在响应中修复eslint解构状态分配？

1 个答案: