Question

我的要求是从第1页到第2页（在提交表单时），用户需要执行一些操作。如果用户导航到page2到page1（向后），则应该填写page1中的所有表单字段。因此，我已将所有数据存储在会话中，但在向后导航时无法分配会话中的所有状态值。

page1组件安装代码：

    componentWillMount() {
        if (sessionStorage.getItem("regData")) {
          let formdata = sessionStorage.getItem("regData");
          JSON.parse(formdata, (key, value) => {
               this.setState({key:value});});
        }
      }

//state variables

    this.state = {
          username: "",
          password: "",
          email: "",
          name: "",
          mobile: "",
          city: "",
          redirectToReferrer: false,
          error: {
            email_error: "",
            password_error: "",
            name_error: "",
            username_error: "",
            mobile_error: "",
            showError: false,
            errorMessage: engTranslations.global.faild
          },
          value: "",
          suggestions: [],
          selectedCity: []
        };

让我知道如何在组件安装方法中一次分配所有状态变量。预先感谢。

Answer 1

您不要为JSON.parse使用回调（这是一个“恢复程序”功能，可帮助反序列化数据）。取而代之的是获取JSON.parse的结果并将其传递到setState：

this.setState(JSON.parse(formdata));

更多：

JSON.parse
setState
Important information for setting state when it's based on other state or props（您不是，所以我们可以将一个对象传递到setState中，但是许多状态更新基于状态或道具，而对于那些，您必须使用setState的回调形式

还值得注意的是，componentWillMount不是执行此操作的正确生命周期方法。由于不涉及异步操作，因此正确的位置就是您的构造函数，而您的构造函数就是，您可以直接将其分配给this.state，因此：

constructor() {
    this.state = Object.assign(
        {/*...default state here...*/},
        JSON.parse(sessionStorage.getItem("regData")) // see note
    );
}

（如果没有regData，getItem将返回null，它将通过JSON.parse传递[它将转换为"null"，然后返回到{ {1}}]并被null忽略，因此我们不需要Object.assign语句。）

（如果涉及到异步操作，则将为componentDidMount，而应使用if。）

Answer 2

我不确定我是否满足要求，但是我猜您需要做的是，假设会话存储值包含您关心的所有字段，而不是这样做：

JSON.parse(formdata, (key, value) => {
               this.setState({key:value});});
});

执行以下操作：

this.setState(JSON.parse(formdata));

另外，请注意，使用componentWillMount设置状态被认为是反模式（https://vasanthk.gitbooks.io/react-bits/anti-patterns/04.setState-in-componentWillMount.html）。

我还认为在会话存储区中存储用户密码不是一个好主意。

Answer 3

您可以尝试一下，一次设置状态：-

   if (sessionStorage.getItem("regData")) {
        let formdata = sessionStorage.getItem("regData");
        let obj = {};
        JSON.parse(formdata, (key, value) => {
            obj.key = value;
            });
        let newState= {...this.state, ...obj};
        this.setState(newState);
      }

如何在React JS中一次更新状态变量

3 个答案: