Javascript 无法读取属性。。。未定义的属性（上下文中的属性/值）

我有一个错误，无法从UserDetails.js读取未定义的属性“name”。该名称值来自上下文

这是我的密码

UsersContext.js：

import React, { createContext, useState, useEffect } from 'react'
import Axios from 'axios';

export const UserContext = createContext()

export function UserProvider(props) {

    const [users, setUsers] = useState([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(false);

    useEffect(() => {
        const getNews = async () => {
            setLoading(true);
            try {
                const req = await Axios.get(`https://jsonplaceholder.typicode.com/users`);
                const data = req.data;

                setUsers(c => {
                    return [
                        ...data
                    ]
                })

                if(data.status !== "ok") throw new Error('error from api server');

            } catch (error) {
                setError(true)
            }
            setLoading(false);
        }

        getNews();
    }, [])

    return (
        <UserContext.Provider value={{users, loading, error}}>
            {props.children}
        </UserContext.Provider>
    )
}

---

但是为什么使用JSON.stringify时有一个值，而没有JSON.stringify时没有未定义的值？

这是因为请求尚未返回结果，用户仍然是[]， 因此，要解决问题，您应该执行以下操作：

return loading? null : (
    <div className="card">
        <div className="card-header">
            {users[0].name}
        </div>
    </div>
)

---

因为请求还没有返回结果，用户仍然是[]， 因此，要解决问题，您应该执行以下操作：

return loading? null : (
    <div className="card">
        <div className="card-header">
            {users[0].name}
        </div>
    </div>
)

---

这是因为useEffect钩子中的请求是异步的，并且在第一次渲染时没有返回任何值。因此，用户具有initail值[]

您可以使用可选链接，也可以在显示用户值之前检查加载状态

或：

处理name属性是带有| |运算符的空字符串的情况也更好：

return loading ? null : (
    <div className="card">
        <div className="card-header">
            {users[0]?.name || "Anonymous"}
        </div>
    </div>
)

---

这是因为useEffect钩子中的请求是异步的，并且在第一次渲染时没有返回任何值。因此，用户具有initail值[]

您可以使用可选链接，也可以在显示用户值之前检查加载状态

或：

处理name属性是带有| |运算符的空字符串的情况也更好：

return loading ? null : (
    <div className="card">
        <div className="card-header">
            {users[0]?.name || "Anonymous"}
        </div>
    </div>
)

---

在该APIRESQUEST返回Javascript代码试图尽快编译的值所需的3秒钟内

如果您不考虑readUsers未定义的3秒钟，您将得到一个错误

这是因为readUsers初始化为未定义的特殊值，该值没有可从中访问的方法或值

如果打开控制台并尝试键入undefined[0]或undefined.toString，则会出现错误，因为undefined上不存在任何内容

为避免此错误，您应该提供一个回退，以便在未定义值时执行此操作，然后在该值变为具有可从中访问的方法和值的其他值时，允许执行这些方法和值

从React导入React，{useffect，useState}； 常数1秒=1000； 常数3秒=3*1秒； //->伪API请求 功能请求{ //->创造新的承诺 返回新PromiseSolve=> //->等待三秒钟后解决承诺 setTimeout=>resolve[{name:Bill}]，三秒钟 ; } 导出默认功能应用程序{ const[readUsers，writeUsers]=useState； useEffect=>{ //->发出需要3秒钟的请求，然后更新状态 apiRequest.thenusers=>writeUsers； }; 回来 {阅读用户？ readUsers.mapuser=>{user.name} : 加载。。。 } ; }

---

在该APIRESQUEST返回Javascript代码试图尽快编译的值所需的3秒钟内

如果您不考虑readUsers未定义的3秒钟，您将得到一个错误

这是因为readUsers初始化为未定义的特殊值，该值没有可从中访问的方法或值

如果打开控制台并尝试键入undefined[0]或undefined.toString，则会出现错误，因为undefined上不存在任何内容

为避免此错误，您应该提供一个回退，以便在未定义值时执行此操作，然后在该值变为具有可从中访问的方法和值的其他值时，允许执行这些方法和值

从React导入React，{useffect，useState}； 常数1秒=1000； 常数3秒=3*1秒； //->伪API请求 功能请求{ //->创造新的承诺 返回新PromiseSolve=> //->等待三秒钟后解决承诺 setTimeout=>resolve[{name:Bill}]，三秒钟 ; } 导出默认功能应用程序{ const[readUsers，writeUsers]=useState； useEffect=>{ //->发出需要3秒钟的请求，然后更新状态 apiRequest.thenusers=>writeUsers； }; 回来 {阅读用户？ readUsers.mapuser=>{user.name} : 加载。。。 } ; }

---

在axios请求完成之前，用户是[]，因此用户[0]是未定义的。@ChrisG aaaaaaaaah为什么我忘记了这个。。。谢谢：在axios请求完成之前，用户是[]，因此用户[0]是未定义的。@ChrisG aaaaaaaaaaah为什么我忘记了这个。。。谢谢：D

return loading ? null : (
    <div className="card">
        <div className="card-header">
            {users[0]?.name}
        </div>
    </div>
)

return loading ? null : (
    <div className="card">
        <div className="card-header">
            {users[0]?.name || "Anonymous"}
        </div>
    </div>
)