在 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）。

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

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

语法不正确 - 您不能调用变量（参数）event.value。
setState 将传递组件道具作为第二个参数而不是事件

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

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

Answer 2

你的问题的答案是肯定的，但首先我需要更正你的代码中的一些地方。
在处理状态对象中的数组属性时，切勿使用 push() 等数组方法直接修改状态。对于您的用例，您可以执行以下操作：

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

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

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

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

Correct way of modifying list/objs in ReactJS

javascript

arrays

setstate

reactjs