如何修复 React 中的 eslint 解构状态分配？

Question

 constructor(props) {
  super(props);
  const { data, image0, image1, image2, image3, image4 } = this.props;
  this.state = {
    data : data,
    image0: image0,
    image1: image1,
    image2: image2,
    image3: image3,
    image4: image4,
  };
}

renderList = () => {
  const { data } = this.state;
  const List = data.map((item, index) => {
    return (
      <Card 
        key={index}
        data={item}
        preview={this.state[`image${index}`]}
      />
    );
  })
}
...

这是我的部分组件代码。我们现在采用 Eslint。此代码抛出错误 'Must use destructuring state assignment(react/distructuring-assignment)'。如何修复它们？？？我们的团队不想为代码关闭此 eslint 规则(react/distructuring-assignment)。

Answer 1

首先，用道具初始化你的状态不是一个好主意。事实上它是一个 React anti-patterns。你可以使用 react life-cycle 方法 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]}
      />
    );
  })
}

如何修复 React 中的 eslint 解构状态分配？

how to fix eslint distructuring state assignment in react?

state

destructuring

reactjs

eslint