Я учу себя React и создаю небольшое одностраничное приложение React с помощью Ax ios API. У меня есть запрос POST, который продолжает сбой. Широкое использование console.log, похоже, указывает на то, что состояние ввода формы каким-то образом изменяется функцией отправки, хотя я не могу понять, почему. Помогите!
Вот код:
import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { Grid, TextField, Button, Typography } from '@material-ui/core'
import { FaHome } from 'react-icons/fa'
const AddItem = ({ setShowAddItem }) => {
const [inputs, setInputs] = useState()
const [submitted, setSubmitted] = useState(false)
useEffect(() => {
console.log(`Type: ${typeof inputs} Data: ${inputs}`)
if (inputs) {
console.log('executing POST')
console.log(`Inside if() Type: ${typeof inputs} Data: ${inputs}`)
axios.post('/api/ItemModels', { ...inputs })
.then(res => {
console.log(res.data)
})
.catch(err => console.error(err))
setInputs()
setSubmitted(false)
}
}, [submitted])
const handleInputChange = event => {
setInputs({ ...inputs, [event.target.name]: event.target.value })
console.log(inputs)
console.log(typeof inputs)
}
const handleSubmit = event => {
console.log("handleSubmit triggered")
if (event) {
console.log("if() in handleSubmit triggered")
console.log(`Inside handleSubmit Data: ${inputs}`)
event.preventDefault()
setSubmitted(true)
}
}
return (
<>
<Grid container className="form-container">
<Typography variant="h3">Add an Item</Typography>
<form noValidate onSubmit={handleSubmit}>
<TextField name="shape" label="Shape" onChange={handleInputChange} required />
<TextField name="size" label="Size" onChange={handleInputChange} required />
<TextField name="color" label="Color" onChange={handleInputChange} required />
<TextField name="clarity" label="Clarity" onChange={handleInputChange} required />
<TextField name="price" label="Price" onChange={handleInputChange} required />
<TextField name="listPrice" label="List Price" onChange={handleInputChange} required />
<Button type="submit">
Submit
</Button>
</form>
</Grid>
<Button type="button" onClick={() => setShowAddItem(false)}>
<FaHome />
</Button>
</>
)
}
export default AddItem
Вот ссылка на CodeSandbox (который может немного отличаться от того, что здесь, так как я играюсь с разными вещами): CodeSandbox
А вот копия консоли из моей последней попытки:
// the last console.log from handleInputChange shows an Object with the right data
object // <= that's the typeof from handleInputChange
handleSubmit triggered
Inside handleSubmit Data: [object Object]
if() in handleSubmit triggered
Inside handleSubmit if() Data: [object Object]
Type: object Data: [object Object] // <= from useEffect
executing POST
Inside if() Type: object Data: [object Object]
Type: undefined Data: undefined // <= useEffect triggered by setSubmitted(false)
Error: "Request failed with status code 400"
Похоже, что запись в журнал указывает на то, что состояние inputs видоизменяется от нормального JavaScript object для [object Object] в функции handleSubmit даже до вызова if() и / или preventDefault(), хотя я не могу понять, почему. Вот код handleSubmit() снова:
const handleSubmit = event => {
console.log("handleSubmit triggered")
console.log(`Inside handleSubmit Data: ${inputs}`)
if (event) {
console.log("if() in handleSubmit triggered")
console.log(`Inside handleSubmit if() Data: ${inputs}`)
event.preventDefault()
setSubmitted(true)
}
}
Я, вероятно, должен подчеркнуть, что я относительный новичок в программировании, и мне пришлось учить себя в значительной степени в изоляции, поэтому я довольно страшно, что где-то есть очевидная ошибка. Тем не менее, я потратил пару часов, пытаясь исследовать это, и даже позвонил другу, который является разработчиком React, и он тоже был в замешательстве. Я пытался поиграться с тем, как вызывается handleSubmit, помещая его в кнопку или возвращая его с помощью функции стрелки на onSubmit. Я также пытался передвигаться по preventDefault. Кажется, ничто не помогает.
Я не думаю, что это имеет отношение к Ax ios, так как inputs уже undefined к тому времени, когда они получают запрос POST, но я положил в Ax ios в качестве тега, надеясь, что это может быть ошибкой. Ax ios -ориентированные программисты знакомы.
Аналогично, выполнение POST-запроса через Postman работает как чудо.
И последнее: бэкэнд для проекта. NET, поэтому я занимаюсь разработкой для Visual Studio. Я подумал, что это может привести к некоторому ошибочному поведению Visual Studio, но выполнение кода из CodeSandbox создает такую же ошибку, поэтому, если это не какая-то странная ошибка форматирования, которая будет перенесена, это, по моему скромному и необразованному мнению, будет чем-то другим.
Есть идеи?