由提交函数改变的反应表单状态

Question

我正在自学 React，并使用 Axios API 构建一个小型单页 React 应用程序。我有一个不断失败的 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 对象转变为 handleSubmit 函数中的 [object Object]，甚至在调用 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 周围移动。似乎没有任何帮助。

我认为这与 Axios 无关，因为 inputs 在收到 POST 请求时已经是 undefined，但我将 Axios 作为标签放入，希望这可能是一个面向 Axios 的程序员都熟悉的 bug。

同样，通过 Postman 发出 POST 请求也很有效。

最后一件事：项目的后端是 .NET，所以我在 Visual Studio 上进行开发。我认为这可能是一些错误的 Visual Studio 行为，但在 CodeSandbox 之外运行代码会产生相同的错误，所以除非它是一些奇怪的格式化错误，否则在我谦虚和未受过教育的意见中，它似乎是别的东西。

有什么想法吗？

Answer 1

这是解决问题的 cmets 的摘要：

像下面这样将对象传递到console.log() 的字符串中总是会导致显示[object Object]，因为将其转换为字符串会导致怀疑对象属性在实际存在时发生了变化。

console.log(`Type: ${typeof inputs} Data: ${inputs}`);

改为使用第二个参数或进行单独的日志调用：

console.log(`Type: ${typeof inputs} Data:`, inputs);

之后，需要更正 POST 数据属性以确保大小写和类型与后端 API 匹配。