javascript - ReactJS 中的 setState 方法没有更新字段

Question

存储受控表单元素的数据后，我想将输入类型的值重置为空。 在下面的这个方法中，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 新手。

Answer 1

在第一个中，您将 passenger 对象分布在您所在州的顶层级别，并添加 firstName 和 lastName 也在顶层。

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

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

但是，每当根据现有状态(您要复制的 passenger 中的其他字段)更新状态时，通常最好使用回调表单，因为状态会更新是异步的并且可以一起批处理:

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