#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? даже если пусто? Я предполагаю, что это проблема асинхронного обновления значения с помощью setFormAboutYouData2. используйте проверку перед чтением const submissionBody= formAboutYouData ? { FirstName: formAboutYouData.FirstName } :» . Кроме того, .post( «URL», submissionBody, -> исправить запятую после submissionBody
3. @KrzysztofKrzeszewski проблема в том, что добавление полей не будет правильно масштабироваться, если мне придется включать больше полей в будущем
4. Я предполагаю, что у вашего submissionBody есть только firstname, и оно не пустое. Поэтому, пожалуйста, попробуйте этот axios.post(«URL»,{submissionBody.FirstName},{ headers: submissionRequestHeader, }) . Кроме того, вы получили дополнительную запятую после url.