在 ReactJS 中修改列表/对象的正确方法

Question

我有一个代码 sn-p 下面我不太确定它是否正确完成。

这是我的代码块：

onChangeMethod(event) {
    this.setState(prevState => ({
        list: [...prevState.list, event.value]
    }));
}

我看到了另一个例子here，我在这里修改了我的代码。可以这样做吗？意思是，我可以将传递给onChangeMethod()的事件值直接用在setState()中声明的函数中吗？

onChangeMethod(event) {
    this.setState((state, event.value) => ({
        list: state.list.push(event.value)
    }));
}

欢呼社区

Answer 1

您的问题的答案是肯定的，但首先我需要更正您的代码中的一些内容。
在处理状态对象中的数组属性时，您永远不应该直接通过使用数组方法（如push()）来修改状态。对于您的用例，您可以执行以下操作：

onChangeMethod({ target: { value } }) {
    this.setState((prevState) => ({
        list: [ ...prevState.list, value ]
    }));
}

或者您可以使用concat() 方法，它总是返回一个新数组，如下所示：

onChangeMethod({ target: { value } }) {
    this.setState({
        list: this.state.list.concat(value)
    });
}

Answer 2

代码 prevState => ({list: [...prevState.list, event.value]}) 是一个匿名箭头函数，其参数名为prevState，返回一个对象{list: [...prevState.list, event.value]}。您将此函数作为参数传递给另一个函数setState。 setState 函数稍后调用您的函数，提供当前组件状态作为第一个参数（实际上它会使用 2 个参数调用您的函数：prevState 和 props）。

类似： function setState(callback) { callback(component.state, component.props) }

您的第二个代码 sn-p 在两个方面不正确：

1. 语法不正确 - 你不能调用变量（参数）event.value。

2. setState 将组件道具作为第二个参数而不是事件传递

我强烈建议您阅读更多关于函数、箭头函数、回调、闭包和一般 JavaScript 的内容。

要回答你的问题，你的第一个代码示例是要走的路，你已经在匿名箭头函数上下文中有变量事件并且可以正常工作。