javascript - 什么时候在 React 中保存状态是安全的？

Question

假设我有一个从表单更新状态的 React 组件。

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      someCheckboxState: false,
    }
  }
  render() {
    return (
      <input onChange={this.handleChange} checked={this.state.someCheckboxState} />
    );
  }
  handleChange(event) {
    this.setState({
      someCheckboxState: event.target.checked,
    });
  }
}

现在我想将该状态发送到服务器(或某处)。如果我只是这样做

handleChange(event) {
  this.setState({
    someCheckboxState: event.target.checked,
  });
  SendStateToServer(JSON.stringify(this.state)); // BAD! Not yet mutated
}

我可以将它放在 render 中，但随后它也会在初始渲染时发送到服务器，并且向状态发送一个名为 render 的函数似乎很愚蠢.

什么时候可以持久化/序列化状态？

Answer 1

React 的 setState 的第二个参数是状态转换完成后触发的回调。

this.setState(newState, () => console.log(this.state));

因此，在您的情况下:

handleChange(event) {
  this.setState({
    someCheckboxState: event.target.checked,
  }, () => {
    SendStateToServer(JSON.stringify(this.state));
  });
}