使用 React 功能组件中的 setState 更新空对象 {}

Question

感谢您的关注。当我尝试更新空对象时，我得到了 null。任何帮助表示赞赏。 :)

在 React 函数式组件中 useState 是：

const [user, setUser] = useState({});

最初，用户是一个空对象，我尝试用 JSON 对象更新用户。

// 新对象看起来像这样 {jwt:-----, name:-----, email:-----}

setUser(newUser);

但是当我console.log(user) 时，我得到了空值。

// 整个代码如下：

export default function Test(props) {

  const [user, setUser] = useState({});
  useEffect(() => {
    // when I console.log(userTemp), I got the JSON object as a response as expected
    let userTemp = JSON.parse(localStorage.getItem('thisUser'))
    
    setUser(userTemp);
    // But, when I tried to log user now (even outside of this method), it gives me null.
  }, []);

Answer 1

const [user, setUser] = useState({});
  localStorage.setItem('thisUser','{"name":"John", "age":30, "city":"New York"}')
  useEffect(() => {
    let userTemp = JSON.parse(localStorage.getItem('thisUser'));
    console.log(userTemp)
    setUser(userTemp)
    console.log('I want to see updated user')
    console.log(user);
  }, [])

  console.log('Its outside useEffect')
  console.log(user);

我做的和你的完全一样，在console.log之外的useEffect用户状态按预期更新。有什么不同吗？

Answer 2

实际上，这与您将user 设置为localStorage 时有关，您在答案中没有提到。您应该以这种方式将对象设置为localStorage：

localStorage.setItem("user", JSON.stringify({ id: 1, name: "biraj" }));

您应该从localStorage 获取对象，如下所示：

let user = JSON.parse(localStorage.getItem("user"));

以下是如何从localStorage 设置和获取对象的完整示例：

import * as React from "react";

localStorage.setItem("user", JSON.stringify({ id: 1, name: "biraj" }));

export default function App() {
  const [user, setUser] = React.useState({});
  React.useEffect(() => {
    let userTemp = JSON.parse(localStorage.getItem("user"));
    setUser(userTemp);
  }, []);

  return (
    <>
      <h1>{user.id}</h1>
      <h2>{user.name}</h2>
    </>
  );
}