状态改变时道具也会改变

Question

我有usersList个数组来自api请求

1. 我使用react-redux处理来自api的数据，然后将{api来的usersList存储在state的{​​{1}}中

getDerivedStateFromProps

1. 我在 static getDerivedStateFromProps(props, state) { const newState = {}; if(state.usersList !== props.usersList && props.usersList.length > 0 && props.loadingStep === '3'){ newState.usersList = props.usersList; } return newState; } 函数中显示usersList数组的内容，用户可以编辑信息，也可以不编辑。
2. 当用户编辑信息时，我将新信息保存在render
中

this.state

问题

问题在于用户何时可能要撤消该更改。 所以我想用this.setState({ usersList:newList }); // where the newList contain the new info

中的旧信息更新状态

但是我发现this.props.usersList包含与该州相同的信息

this.props.usersList

我的问题是：

为什么console.log(this.state.usersList) // [1,2,3, ... the new info] console.log(this.props.usersList) // [1,2,3, ... the new info] 更新为this.props.usersList

Answer 1

newState.usersList = props.usersList;

创建对props.usersList的引用。因此，它将始终引用usersList。

尝试克隆props.usersList的数组：

newState.usersList = [...props.usersList];

使用传播运算符“ ...”，您可以轻松地将一个数组克隆到一个新数组中，而不仅仅是引用。

有帮助吗？