授权后,重定向到 /userProfile
页面,我得到错误。
Uncaught (in promise) TypeError: 无法读取null的属性'name'。
我有 <Page />
组成部分。
的代码。
const Page = () => {
return (
<div>
<div style={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
<h1>{`${userData.name} ${userData.surname}`}</h1>
<button onClick={() => logout()} style={{display: "block"}}
className="btn btn-large ">
Выйти</button>
</div>
</div>
);
};
它通过useState钩子使用了名为userData的状态值
const [loading, setLoading] = useState(true);
const [userData, setUserData] = useState({name: "", surname: "", posts: [], email: "", password: ""});
我在useEffect钩子中获取数据
const request = useCallback(async (url, method = 'POST', body = null, headers = {}) => {
setLoading(true)
try {
if (body) {
body = JSON.stringify(body)
headers['Content-Type'] = 'application/json'
}
const response = await fetch(url, {method, body, headers});
const data = await response.json();
setLoading(false);
return data;
} catch (e) {
setLoading(false)
throw e
}
}, []);
useEffect(() => {
const response = request("/api/user/getDataByUserId", "POST", {userId: userId});
response.then(r => {
setUserData(r.data);
});
}, [request, userId]);
我从AuthContext中得到的userId我已经尝试解决这个问题两天了,请帮助我。
你需要检查useEffect里面的 "setUserData(r.data)",试着在r和r.data上做console.log。问题可能是r.data将userData设置为null。如果它是空的,你可以根据需要设置默认或无效。
检查为 "userData &&{${userData.name} ${userData.surname}"将是一个很好的做法,更好的方法是做一个函数getFullNameMarkup并在里面做检查。
我把h1标签改成了 {userData && <h1>
{${userData.name} ${userData.surname
}}</h1>}
而且它正在工作