我怎样才能让 localStorage 与 ReactJS 一起工作？

Question

我正在开发基于 MERN 的 Web 应用程序，但在让 ReactJS 将用户令牌保存到本地存储中时遇到问题。它正确地将数据发送到 MongoDB 并从 React UI 取回令牌，但没有保存令牌。

这是表格：（我也在使用 tailwind 进行造型）

<form onSubmit={this.submitInfo} className="shadow-md rounded px-8 pt-6 pb-8 mb-4">
                                <div className="mb-4">
                                    <label className="block text-gray-700 text-sm font-bold mb-2">
                                        Username: 
                                        <input id="username" type="text" value={this.state.name} onChange={this.inputChange} className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"/>
                                    </label>
                                </div>

                                <div className="mb-4">
                                    <label className="block text-gray-700 text-sm font-bold mb-2">
                                        Email: 
                                        <input id="email" className="shadow" type="email" value={this.state.email} onChange={this.inputChange} className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"/>
                                    </label>
                                </div>

                                <div className="mb-4">
                                    <label className="block text-gray-700 text-sm font-bold mb-2">
                                        Password: 
                                        <input id="password" type="password" value={this.state.password} onChange={this.inputChange} className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"/>
                                    </label>
                                </div>
                                <div className="flex items-center justify-between">
                                    <input className="bg-primary hover:bg-highlight text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit" value="Signup"/>
                                </div>
                            </form>

这是单击提交按钮时运行的函数：

submitInfo(event){
        fetch(`http://localhost:5000/users/register`, {
            method: 'POST',
            headers: {
                'Content-type': 'application/json',
            },
            body: JSON.stringify({"userName":this.state.name, "email":this.state.email, "password":this.state.password})
        })
            .then(response => localStorage.setItem("token", JSON.stringify(response)))
            .catch(err => console.error(err));

        window.location.href = "/browse"
    }

我看不出我的实施有任何内在的错误。我已经用邮递员测试了 API 并且它发回了一个非常好的令牌所以问题一定是在反应方面。我有没有忽略什么？

编辑：我尝试删除 window 重定向，但它仍然无法保存令牌。

Answer 1

除了评论所说的重定向和预防默认之外，您还需要先从响应对象中提取 JSON 对象，然后再将其保存到 localStorage。您可以通过以下方式完成所有这些操作：

submitInfo(event) {
  event.preventDefault();
  fetch(`http://localhost:5000/users/register`, {
    method: 'POST',
    headers: {
      'Content-type': 'application/json',
    },
    body: JSON.stringify({"userName":this.state.name, "email":this.state.email, "password":this.state.password})
  })
    .then(response => response.json())
    .then(data => {
      localStorage.setItem("token", JSON.stringify(data));
      window.location.href = "/browse";
    )
    .catch(err => console.error(err));
}

您可以在此处的 MDN 文档上阅读有关使用 fetch API 的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

我怎样才能让 localStorage 与 ReactJS 一起工作？

How can I get localStorage to work with ReactJS?

html

javascript

local-storage

reactjs