类型错误：无法读取 null 的属性（读取“用户”）

Question

我想在我的控制台中获取 (mohammad) 但当我使用： console.log(user.user.name) 时，我给出 TypeError: Cannot read properties of null (reading 'user') ！为什么？我能做些什么？感谢你们

export const Shopping = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const token = localStorage.getItem("token");
    if (!token) {
      setUser(null);
      return;
    }

  
    const response = {
      data: {
        user: {
          name: "mohammad",
          email: "mohamad@gmail.com",
        },
      },
    };
    if (!response.data.user) {
      setUser(null);
      return;
    } else {
      setUser({ user: response.data.user }); console.log(user.user.name);
    }
  }, []);


  return (
    <div className="Shopping-Container">
      <NavbarStore user={user} />
      <Routes>
        <Route path="/" element={<Store />} />
     </Routes>
      <Footer />
    </div>

Answer 1

最初，在第一次渲染中，user状态有一个值null，因此user不能有属性。

您可以采取的预防措施是： console.log(user?.user?.name);

user?.user意味着js只会尝试获取property only if the user is not undefined or null，如果user is null，则不会继续前进 和null will be printed。

与 的情况相同user.user?.name，如果user.user不为空，则它将得到name property否则打印null