javascript - 在ReactJS中修改list/objs的正确方法

Question

我有一个代码片段，我不太确定它是否正确完成。

这是我的代码块:

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

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

类似:函数 setState(callback) { 回调(component.state, component.props) }

您的第二个代码片段在两个方面是不正确的:

1. 它的语法不正确 - 您无法调用变量(参数)event.value。

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

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

为了回答您的问题，您的第一个代码示例就是正确的方法，您已经在匿名箭头函数上下文中拥有变量事件并且可以正常工作。