Question

我是ReactJS的新手，非常期待在这里提供帮助。我创造了一个我怀疑的原型。我有一个对象数组，它是我的父组件中的状态（应用程序），我将它们映射到子组件（列表），并且此子组件是有状态的只为其视觉角度改变其状态的组件（这意味着我不想在我的父组件中更新该状态，当然如果我在父级的状态下更新它，这个问题也会解决）。因此，如果我更新我的孩子的状态并向父母状态添加新数据，则组件重新呈现，并且我的子组件索引被子项的状态错位。

class List extends React.Component {
  constructor() {
    super();
    this.state = {
      checked:false 
    }
  }
  onChange = () => {
    this.setState({checked:!this.state.checked})
  }
  render() {
    const {data} = this.props;
    return(
      <tr>
        <td>{data.name}</td>
        <td>{data.age}</td>
        <td><input type='checkbox' onChange={this.onChange} checked={this.state.checked?true:false}/></td>
      </tr>
    )
  }
}
class AddData extends React.Component {
...
}
class Application extends React.Component {
  constructor() {
    super();
    this.state = {
      datas: [
        {name:'user1',age:'26'},{name:'user2',age:'27'}
      ]
    }
  }
  addData = (data) => {
    let newData = [data];
    this.setState((prevState) => ({datas:[...newData,...prevState.datas]}));
  }
  render() {
    const { datas } = this.state;
    return (
      <div>
        <h3>Example</h3>
        <table className="table table-bordered table-striped">
          {datas.map((data,index) =>
            <List data={data} key={index}/>
          )}
        </table>
        <AddData addData={this.addData}/>
      </div>
    )
  }
}

我们在上面的例子中说，

我选中了user1的复选框
然后我添加一个新用户并更新我的状态
新用户堆叠在当前状态数据
我的组件重新渲染，现在将检查新用户的复选框。

那么有没有办法让我的孩子说明父母已经改变了，请找到工作示例this pen

提前致谢！

Answer 1

恰好是因为你正在使用index for key，react使用键来记住哪个组件被更改了，所以在你的例子中，如果你检查第一个元素，它的键将是0（作为它在数组中的索引），所以现在做出反应知道你的元素与键0被检查，当你重新渲染新元素时接收键0并且react对这个元素应用了更改，因为它认为这是你检查的原始元素。使用来自对象的原始属性，它将正常工作，如果你没有这样的属性尝试分配id .. uuid是一个很棒的库。或者您可以添加新数据作为数组的最后一个元素，与您现在所做的相反，但它不是推荐的解决方案。

子组件（有状态）不了解父组件索引已更改

1 个答案: