我从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时没有任何值(未定义)?
这是因为请求尚未返回结果,并且用户仍然[],因此要解决问题,您应该执行以下操作:
return loading? null : (
<div className="card">
<div className="card-header">
{users[0].name}
</div>
</div>
)
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句