ReactJS 中的 setState 方法未更新字段答案

【问题标题】：setState method in ReactJS is not updating the fieldsReactJS 中的 setState 方法未更新字段
【发布时间】：2020-02-29 15:16:42
【问题描述】：

从受控表单元素存储数据后，我想将输入类型的值重置为空。在下面的这个方法中，setState 没有将其设置为空。不知道为什么。

 handleSubmit = event => {
        event.preventDefault();
        this.props.dispatch(passengerActions.addPassenger(this.state.passenger));
        this.setState({ ...this.state.passenger, firstName: "", lastName: "" });
  };

以下方法有效

handleSubmit = event => {
    event.preventDefault();
    this.props.dispatch(passengerActions.addPassenger(this.state.passenger));
    const passenger = {
      ...this.state.passenger,
      firstName: "",
      lastName: ""
    };
    this.setState({ passenger });
};

请帮助我理解为什么第一种方法不起作用。我是 ReactJS 的新手。

【问题讨论】：

他们不做同样的事情。目前尚不清楚您需要什么样的状态形状，但第二个示例将新的空字符串存储为this.state.passenger.firstName（等），而第一个示例直接在this.state.firstName
顺便提一下，您不应该在setState 中直接引用this.state。您应该改为传递一个函数 - 请参阅文档here

标签： javascript reactjs

【解决方案1】：

在第一个中，您将 passenger 对象分散在您的状态的 top 级别，并在顶级添加 firstName 和 lastName。

您可能想更新passenger，这是您在第二个中所做的：

this.setState({passenger: { ...this.state.passenger, firstName: "", lastName: "" }});
// −−−−−−−−−−−−^^^^^^^^^^−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^

但是，每当根据现有状态更新状态（passenger 中的其他字段你正在复制），通常最好使用回调形式，因为状态更新是异步的，可以获取一起分批：

this.setState(({passenger}) => ({passenger: { ...passenger, firstName: "", lastName: "" }}));

【讨论】：

【解决方案2】：

您应该重写您的第一个解决方案，例如：这个.setState({ ...状态，乘客：{ 名： ””，姓： ”” } })

【讨论】：

假设您的意思是this.state，而不仅仅是state，这是不好的做法，至少有几个原因。一个是状态更新是异步的并且可以批处理，因此在设置时使用当前状态可能最终会覆盖已计划但尚未完成的某些内容。此外，React 无论如何都会将你得到的对象 setState 与状态合并，所以上面的 ...state 不仅不是一个好主意，而且是不必要的。最后，您在上面假设 passenger 只有 firstName 和 lastName 字段，但考虑到 OP 的问题，这似乎不太可能。
@T.J Crowder - 感谢您的信息。刚开始，我在用手机，所以没有“赶上”那个乘客有没有提到的其他领域。当然，感谢您提供给我的信息，我肯定会在文档中查看这些信息，似乎我误解了一些概念，或者至少没有使用最佳实践。所以，再次感谢您指出我！
别担心！有些东西一开始很棘手。 :-) 编码快乐！（您可以使用其下方的“删除”链接删除答案——这也可以让您恢复代表所付出的代价。）
哈哈我会考虑的；）再次感谢！