双向数据绑定在React中嵌套Form状态到localStorage

Question

我正在为用户创建表单构建器来创建问题。每个问题都可以有无数个子问题，我想将数据保存到localStorage。

基于localStorage存储JSON的表单中每个问题/子问题的状态，动态更新localStorage的最佳方法是什么？有没有办法采用Reacts单向数据流原理并使其状态与本地存储并行运行？

Answer 1

我认为您可以在容器级别的表单组件中定义状态变量，并在表单更新时调用localStorage.set（＆＃39; MY_QUESTIONS＆＃39;，questionsObj），以便localStorage对象是与状态变量同步。

例如，您可以在每次状态更改的回调中调用它：

handleQuestionsUpdate() {
    this.setState({
      formQuestions: newQuestions
    }, () => {
      localStorage.setItem('MY_QUESTIONS', this.state.formQuestions)
    });
}