TypeError：无法读取 null 的属性（读取“用户”）

Question

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>

我想在我的控制台中获取（mohammad），但是当我使用：console.log（user.user.name）时，我给出 TypeError：无法读取 null 的属性（读取“用户”）？ 为什么？ 我能做些什么？ 感谢你们

Answer 1

错误清楚地说明出了什么问题。 这是因为您的user初始值为null 。 这就是为什么当您执行user.user.name时出现该错误的原因。

认为您已经通过setUser({ user: response.data.user });设置了值 ? 不，它不会立即执行。 组件将首先呈现，然后执行useEffect中的代码。

Answer 2

最初，在第一次渲染中， user state 的值是null ，因此user不能拥有属性。

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

user is null user?.user property only if the user is not undefined or null null will be printed

同样在user.user?.name的情况下，如果user.user不是 null，它将获得name property ，否则打印null

Answer 3

@Akza，是的，很明显出了什么问题。 您愿意分享解决问题的答案吗？ Himanshu Singh 的回答对我的情况没有帮助：

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'uid') at setup

如果没有 main.js 文件，如何在页面尝试渲染到 DOM 之前从 firebase 获取用户 ID？