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

阿尔菲

我从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 条评论
登录 后参与评论

相关文章

来自分类Javascript

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

来自分类Javascript

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

来自分类Dev

原始异常:无法读取未定义的属性“值”

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Javascript

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

无法读取未定义的给定属性

来自分类Dev

Vuex无法读取未定义的属性

来自分类Dev

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

来自分类Dev

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

来自分类Javascript

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

来自分类Dev

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

来自分类Dev

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

来自分类Javascript

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Javascript

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

TOP 榜单

热门标签

归档