Question

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

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

现在我想将该状态发送到服务器（或某个地方）。如果我这样做

render

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

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

Answer 1

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

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

所以，在你的情况下：

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

Answer 2

是的，setState() second parameter，是做这些事情的完美方式。

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      someCheckboxState: false,
    }
  }
  render() {
    return ( < input type = "checkbox"
      onChange = {
        this.handleChange
      }
      checked = {
        this.state.someCheckboxState
      }
      />
    );
  }
  handleChange(event) {
  this.setState({
    someCheckboxState: event.target.checked,
  }, () => { // do your work
      console.log(JSON.stringify(this.state));
    });
}
}

ReactDOM.render( < Form / > , document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

何时在React中保存状态是否安全？

2 个答案: