Question

我正在自学React，并使用Axios API构建了一个小的单页React应用。我有一个POST请求，但仍然失败。 console.log的广泛使用似乎表明表单输入的状态正在某种程度上被Submit函数更改，尽管我不知道为什么。救命！

这是代码：

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的程序员所熟悉的错误。

类似地，通过Postman发出POST请求的过程就像一种魅力。

最后一件事情：该项目的后端是.NET，因此我正在Visual Studio上进行开发。我以为这可能是Visual Studio的一些错误行为，但是从CodeSandbox中运行代码会产生相同的错误，因此，除非我遗留下来一些奇怪的格式化错误，否则在我谦虚而又没有教养的看来，这似乎是另一回事。

有什么想法吗？

Answer 1

这是解决问题的评论的摘要：

像下面这样将对象传递到DELETE t1 FROM table1 t1 WHERE EXISTS ( SELECT NULL FROM table1 t2 WHERE t1.user_id = t2.user_id AND t1.id > t2.id )的字符串中，由于将(user_id, id)强制转换为字符串，总是导致显示console.log()，这导致怀疑对象属性在实际存在时会发生突变。 / p>

[object Object]

相反，使用第二个参数或进行单独的日志调用：

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

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

反应由提交功能

1 个答案: