两种方式数据绑定嵌套表单状态到 React 中的 localStorage

【问题标题】：Two way data binding nested Form state to localStorage in React两种方式数据绑定嵌套表单状态到 React 中的 localStorage
【发布时间】：2017-07-10 05:15:50
【问题描述】：

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

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

【问题讨论】：

标签： javascript forms reactjs local-storage state

【解决方案1】：

我认为您可以在容器级别的表单组件中定义一个状态变量，并在表单有更新时调用 localStorage.set('MY_QUESTIONS', questionsObj) 以便 localStorage 对象与状态变量同步.

例如，你可以在每次状态变化的回调中调用它：

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

【讨论】：

我最终在应用层使用了 lodash 的 _.set 方法，并为每个表单输入传递了一个路径键，该路径键映射到它在树中的位置