javascript - react .js : Changing the child state also changes its proptype passed by parent

Question

我遇到的问题是，当我更改子组件的状态时，父组件的状态也会更改。我将 Prop 传递给 child :

{this.state.users.map((user, index) => (
      <UserRow
        key={user.id}
        user={user}
        removeUser={this.removeUser}
        getUserInfo={this.getUserInfo}
        finishFunc={this.finishChanges}
      />
    ))}

然后像这样将该 Prop 分配给 child 的状态:

state = {rowUser: this.props.user};

但是，当我更新这个子状态时，父状态似乎没有重新渲染就更新了。

我通过 prop 显示信息，而不是状态

<div>{this.props.user.rules.length !== 0 ? this.props.user.rules.length : null}</div>

可以看到初始显示here

当我点击“添加”或“删除”按钮时，状态和显示发生变化。您可以在图像中看到变化 here

我对更改子状态如何更新父状态而没有专门将数据传回父状态感到困惑。我也看不到它是如何改变显示的，因为我使用的是 Prop ，而不是状态。

您可以在 sandbox here 中看到我的所有代码.每当您单击“添加新权限”和“删除权限”按钮时，您都可以看到权限编号发生变化，这是我不希望发生的。

如何避免在更改子状态时父状态自动更改？

Answer 1

问题:

问题在于我如何更改 child 的状态 state = {rowUser: this.props.user}。我正在改变数据并像这样重置状态:

addPermission = () => {
  const tempUser = { ...this.state.rowUser };
  tempUser.permissions.push({
    property: "select permission",
    info: "type info..."
  });
  this.setState({ rowUser: tempUser });
  console.log("[UserEditingRow.js] permission added");
};

解决方案:

直接更改数据(即 tempUser.permissions.push({...});)导致了问题。我用 React immutability helper帮助更具体地更新 child 的状态。因此，新函数将是:

addPermission = () => {
  this.setState(
    update(this.state, {
      rowUser: {
        permissions: {
          $push: [{property: 'select rule', info: ''}],
        },
      },
    }),
  );
  console.log('[UserEditingRow.js] rule added');
};

使用不变性助手设置状态允许子组件的状态在不更新父组件的状态的情况下发生变化并解决了我的问题。