Javascript не может прочитать свойство undefined, но alert может показать значение

#javascript #reactjs #axios

#javascript #reactjs #axios

Вопрос:

Я создаю приложение с реактивной формой. Использование перехвата управления для получения данных из форм вместе с состояниями. У меня есть страница about, где состояние инициализируется

 const [formAboutYouData, setFormAboutYouData] = React.useState(undefined);
 

и onSubmit я вызываю функцию отправки, которая использует ее для выполнения вызова API axios post. formAboutYouData имеет атрибут с именем FirstName, который он получил из форм (имя поля ввода). Внутри функции отправки я могу распечатать его с помощью консоли или alert(formAboutYouData.FirstName), он работает нормально. Теперь проблема в вызове axios, если я использую like

 axios
  .post(
    "URL",
    { firstName: formAboutYouData.firstName },
    {
      headers: submissionRequestHeader,
    }
  )
 

вместо этого он отлично работает, если я использую

 axios
  .post(
    "URL",
    ,submissionBody
    {
      headers: submissionRequestHeader,
    }
  )
 

и объявить тело отправки отдельно как

const submissionBody={ FirstName: formAboutYouData.FirstName, }

затем я получаю сообщение об ошибке, поскольку не удается прочитать свойство FirstName неопределенного. Почему это происходит?

Комментарии:

1. Вы пробовали изменять значение по умолчанию formAboutYouData для включения поля FirstName? даже если пусто? Я предполагаю, что это проблема асинхронного обновления значения с помощью setFormAboutYouData

2. используйте проверку перед чтением const submissionBody= formAboutYouData ? { FirstName: formAboutYouData.FirstName } :» . Кроме того, .post( «URL», submissionBody, -> исправить запятую после submissionBody

3. @KrzysztofKrzeszewski проблема в том, что добавление полей не будет правильно масштабироваться, если мне придется включать больше полей в будущем

4. Я предполагаю, что у вашего submissionBody есть только firstname, и оно не пустое. Поэтому, пожалуйста, попробуйте этот axios.post(«URL»,{submissionBody.FirstName},{ headers: submissionRequestHeader, }) . Кроме того, вы получили дополнительную запятую после url.