Почему состояние равно нулю? - PullRequest
Новая
       23

Почему состояние равно нулю?

0 голосов
/ 09 мая 2020

После авторизации и перенаправления на страницу /userProfile я получаю сообщение об ошибке:

Uncaught (в обещании) TypeError: невозможно прочитать свойство 'name', равное 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>
    );
};

Он использует значение из состояния с именем userData через ловушку useState 

const [loading, setLoading] = useState(true);
const [userData, setUserData] = useState({name: "", surname: "", posts: [], email: "", password: ""});

Я получаю данные в useEffect hook 

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]);

userId Я получил из AuthContext Я пытался решить эту проблему в течение двух дней, ПОМОГИТЕ МНЕ

Ответы [ 2 ]

0 голосов
/ 09 мая 2020

Вам нужно проверить "setUserData (r.data)" внутри useEffect, попробуйте сделать console.log для r и r.data. Проблема может заключаться в том, что r.data устанавливает для userData значение null. Если он приближается к нулю, вы можете установить значение по умолчанию или недействительное в соответствии с требованиями.

Проверка как "userData && {$ {userData.name} $ {userData.surname}" будет хорошей практикой и лучшим способом сделать это будет делать функцию getFullNameMarkup и проводить внутри нее проверки.

0 голосов
/ 09 мая 2020

Я изменил тег h1 на {userData && <h1> {${userData.name} ${userData.surname} }</h1>}, и он работает

...