无法读取未定义的属性...(上下文中的属性/值)

阿尔菲

我从UserDetails.js中收到错误消息“无法读取未定义的属性'名称'”。该“名称”值来自上下文。

这是我的代码

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>
    )
}

UserDetails.js:

import React, { useContext } from 'react'
import { UserContext } from '../contexts/UsersContext'

function UserDetails(props) {
    const {users} = useContext(UserContext)

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

export default UserDetails

来自UserDetail的{users [0] .name}未定义,但是当我尝试使用{JSON.stringify(users [0])}时,它具有以下值:

{"id":1,"name":"Leanne Graham","username":"Bret","email":"[email protected]","address":{"street":"Kulas Light","suite":"Apt. 556","city":"Gwenborough","zipcode":"92998-3874","geo":{"lat":"-37.3159","lng":"81.1496"}},"phone":"1-770-736-8031 x56442","website":"hildegard.org","company":{"name":"Romaguera-Crona","catchPhrase":"Multi-layered client-server neural-net","bs":"harness real-time e-markets"}}

但是,为什么在使用JSON.stringify时有一个值,但是没有JSON.stringify时没有任何值(未定义)?

尼克318

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TypeError:无法读取VueJS上下文中未定义的属性“替换”

无法读取未定义的属性“上下文”-GraphQL

无法从上下文中解构对象的属性,因为它是未定义的

无法读取未定义的属性(读取 *)

TypeError:无法读取未定义的 React Native 上下文的属性“提供者”

无法从Promise,上下文API(反应钩子)读取未定义的属性“代码”

反应上下文:TypeError:无法读取未定义的属性“areResultsVisible”

传递上下文时无法读取未定义的属性“参数” - Google 上的操作

TypeError:无法读取未定义的属性“未定义”

我正在尝试从componentDidMount函数的上下文中调用函数,但是我得到了无法读取的未定义错误属性

无法读取属性未定义

无法读取未定义的属性“中止”

无法读取未定义的属性“*******”

无法读取未定义的属性“ $ valid”

无法读取未定义的属性“片段”

无法读取未定义的属性“ promise”

无法读取未定义的属性“ $ nuxt”

无法读取未定义的属性“推送”?

无法读取未定义的属性“ next”

无法读取未定义的属性“ split”

无法读取未定义的属性“asObservable”

“无法读取未定义的属性。”

* ngFor无法读取未定义的属性

Nodemailer:无法读取未定义的属性“ then”

无法读取未定义的属性“”

无法读取 lat 未定义的属性

Angular无法读取未定义的属性

无法读取未定义的属性摆动

无法读取未定义的属性“getUniqueId”