为什么状态为空？答案

【问题标题】：Why state is null?为什么状态为空？
【发布时间】：2020-08-25 01:04:46
【问题描述】：

授权并重定向到/userProfile页面后我得到错误：

Uncaught (in promise) TypeError: Cannot read property 'name' of null.

我有<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 获得的用户 ID 这个问题我试了两天解决了，请帮助我

【问题讨论】：

你的请求方法所在的组件是什么
似乎<Page /> 组件无权访问userData。您在哪里使用该组件？也许您可以尝试通过props 传递userData。
我已经完全找到了解决办法。我需要将 h1 标签更改为 {userData &&
{${userData.name} ${userData.surname}}
} 检查

标签： javascript reactjs react-hooks

【解决方案1】：

你需要检查useEffect里面的“setUserData(r.data)”，尝试在r和r.data上做console.log。问题可能是 r.data 将 userData 设置为空。如果它即将为空，您可以根据需要设置默认或无效。

检查为“userData && {${userData.name} ${userData.surname}”将是一个很好的做法，更好的方法是创建一个函数 getFullNameMarkup 并在其中进行检查。

【讨论】：

【解决方案2】：

我将 h1 标签更改为 {userData && <h1>{${userData.name} ${userData.surname}}</h1>} 并且它正在工作

【讨论】：

{${userData.name} ${userData.surname}}

{`${userData.name} ${userData.surname}`}