Почему я получаю undefined из строки, содержащей данные?

Итак, я извлекаю данные из своей базы данных, используя API с этим кодом:

let { id } = useParams();
const [Tenant, setTenant] = useState("");
useEffect(() => {
  axios.get(`http://localhost:3001/tenants/byId/${id}`).then((response) => {
    setTenant(response.data);
  });
}, []);

Затем я пытаюсь установить значение по умолчанию в текстовом поле пользовательского интерфейса материала, используя:

<TextField 
    required id = "Field1" 
    defaultValue = {Tenant.tenantName}
    label = "Tenant Name" 
    variant = "outlined" 
    onChange = {(event) => {setNtenantName(event.target.value)}}
    />

Но я ничего не получал. Поэтому я решил console.info(Tenant.tenantName) и получил это в своей консоли:

Почему я получаю undefined из строки, содержащей данные?

Потому что вы делаете Tenant.tenantName, и ваше состояние изначально представляет собой пустую строку, не имеющую свойства tenantName. Ваше состояние устанавливается на данные вашего API только после завершения вашего запроса Axios GET (что происходит не сразу и занимает некоторое время)

— 21.03.2022 12:09

javascript node.js reactjs

21.03.2022 12:06

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Так что можете проверить.

{Tenant && (
   <TextField 
        required id = "Field1" 
        defaultValue = {Tenant.tenantName}
        label = "Tenant Name" 
        variant = "outlined" 
        onChange = {(event) => {setNtenantName(event.target.value)}}
        />
)}

также, кстати, не принято использовать заглавные буквы в именах штатов.

вы можете изменить его на: const [tenant, setTenant] = useState(""); просто для условности

21.03.2022 12:16

Ответ принят как подходящий

То, что предлагает Кевин, должно работать хорошо, но вы также можете сделать что-то подобное, что может быть легче читать и будет отображать загрузчик во время выборки данных.

if (Tenant === undefined) return <div>Loading data....</div> 
else return (
  <TextField 
    required id = "Field1" 
    defaultValue = {Tenant.tenantName}
    label = "Tenant Name" 
    variant = "outlined" 
    onChange = {(event) => {setNtenantName(event.target.value)}}
    />
)

21.03.2022 12:22

Другие вопросы по теме

Каков наиболее эффективный способ часто менять значение всей записи в mongodb

Событие Electron «готово к показу» не работает должным образом

Как правильно выполнить POST-запрос?

Mongodb — получить запись, которая точно соответствует массиву, но независимо от порядка элементов в массиве

Как я могу обновить URL-адрес облачного изображения и сохранить его в базе данных в nodejs и reactjs

Не удалось обновить мой веб-сайт ReactJS на Heroku

Возможно ли с помощью BigQuery экспортировать данные таблицы в файл XLS?

Ошибки при установке Ngx-Admin

Когда я использую Express cookie-session, достаточно ли удалить cookie на стороне клиента, чтобы выйти из системы?

Как сохранить изображение в PostgreSQL с помощью Prisma 2 и NodeJS?

Почему я получаю undefined из строки, содержащей данные?

Ответы 2

Другие вопросы по теме

Похожие вопросы