由提交功能改变的反应表单状态

Question

I'm teaching myself React, and building a small single-page React app with an Axios API. I have a POST request that keeps on failing. Extensive use of console.log seems to indicate that the state of the form inputs is somehow getting changed by the submit function, though I can't figure out why. Help!

Here's the code:

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

Here's a link to a CodeSandbox (which may be a bit different than what is here, as I play around with different things): CodeSandbox

And here's a copy of the console from my most recent attempt:

// 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"

The logging seems to indicate that the inputs state mutates from a normal JavaScript object to [object Object] in the handleSubmit function, even before the if() and/or preventDefault() are called, though I can't figure out why. Here's the code of handleSubmit() again:

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)
        }
}

I should probably emphasize that I'm a relative newcomer to programming, and I've had to teach myself pretty much in isolation, so I'm pretty scared that there's an obvious mistake somewhere. Still, I've spent a couple of hours trying to research this, and even called a friend who's a React developer, and he was stumped too. I've tried playing around with how handleSubmit is called, putting it in the button, or having it returned by an arrow function by onSubmit . I've also tried moving around the preventDefault . Nothing seems to help.

I don't think this has what to do with Axios, as the inputs are already undefined by the time they get to the POST request, but I put in Axios as a tag hoping that this may be a bug Axios-oriented programmers are familiar with.

Similarly, making the POST request through Postman works like a charm.

One final thing: the backend for the project is .NET, so I'm developing on Visual Studio. I thought this might some buggy Visual Studio behavior, but running the code out of CodeSandbox creates the same bug, so unless it's some weird formatting bug that carried over, it seems to be something else, in my humble and uneducated opinion.

Any ideas?

Answer 1

This is a summary of the comments which solved the problem:

Passing an object into the string for console.log() like below always results in showing [object Object] due to casting it as a string which lead to suspecting that the object properties are mutated when they were actually present.

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

Instead, use the second argument or do a separate log call:

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

After that it was a case of correcting the POST data properties to make sure the casing and types matched up with the backend API.