const [projectData, setprojectData] = useState();
useEffect(() => {
    Axios.get(`/fetch-project-details/${id}`, {
        headers: {
            "x-access-token": localStorage.getItem(`login`)
       }
    }).then((response) => {
        let result = response.data.recordset;
        setprojectData(result[0]); // store array in state projectData
    });
},[]);


return (
    <div>
    <h1>{projectData.title}</h1>
    ... other code

);

Я получаю ** TypeError: не удается прочитать заголовок свойства undefined **

Как сначала получить данные, а затем передать их?

0
deepak murthy 2 Мар 2021 в 09:06

3 ответа

Лучший ответ

Вы должны инициализировать значение projectData как пустой объект или визуализировать jsx, если projectData не определено.

const [projectData, setprojectData] = useState({});
    useEffect(() => {
        Axios.get(`/fetch-project-details/${id}`, {
            headers: {
                "x-access-token": localStorage.getItem(`login`)
           }
        }).then((response) => {
            let result = response.data.recordset;
            setprojectData(result[0]); // store array in state projectData
        });
    },[]);
    
    
    return (
        <div>
        <h1>projectData.title</h1>
        ... other code
    
    );
1
Irvin Sandoval 2 Мар 2021 в 06:11

Для самого начального монтирования Компонента projectData равно undefined, поэтому вы получаете сообщение об ошибке.

Вы ставите галочку, если он обновлен данными, которые вы получаете.

    return (
    
    <div>
    {projectData ? 
     <h1>projectData.title</h1> : 'loading'}
    ... other code
);

Если вы не хотите работать таким образом, всегда помещайте начальное значение состояния как что-то, что соответствует структуре ваших будущих данных, например, начальное значение вашего состояния может быть примерно таким:

{title: ''}

Но всегда безопасно проверить состояние перед тем, как получить к нему доступ.

0
Mateen 2 Мар 2021 в 06:12

Перед возвращением вызова axios projectData инициализируется с помощью undefined. Итак, пока React ожидает возврата вызова, чтобы вы могли установить projectData, он выполняет рендеринг с тем, что у него есть. У вас должен быть какой-то статус по умолчанию (обычно используется загружаемое изображение или текст «Подождите»). Вы захотите вернуть свой статус по умолчанию, если projectData не определено:

if (!projectData) {
  return <p>Loading. Please Wait...</p>;
}

В зависимости от того, как вы ожидаете, что данные будут выглядеть, вы также можете добавить к этой проверке, что projectData.title существует и имеет ожидаемое вами значение.

0
samuei 2 Мар 2021 в 06:13