如何从此代码中解析语法错误

Question

在下面运行代码会在控制台中引发语法错误。 它指向传播操作员是一个错误， 请我如何解决？

从“ react”;导入{usestate}

    const [dataInput,setDataInput] = useState({ name: "", age: "", id: "" });
        const nameChangeHandler = (event) =>{
        setDataInput((previousDataInput)=>{...previousDataInput, name:event.target.value})
    }
    return (
        <div>
            <label>Username</label>
            <input type="text" onChange={nameChangeHandler} />
            <label>Age (Years)</label>
            <input type="number" />
        </div>
    );
};
export default FormInputs;```



This is the error

Failed to compile.

./src/components/Form/FormInputs.js
SyntaxError: C:\Users\User\Desktop\Programs\React\academind\src\components\Form\FormInputs.js: Unexpected token (6:37)

  4 |   const [dataInput,setDataInput] = useState({ name: "", age: "", id: "" });
  5 |           const nameChangeHandler = (event) =>{
> 6 |           setDataInput((previousDataInput)=>{...previousDataInput, name:event.target.value})
    |                                              ^
  7 |   }

Answer 1

返回对象的文字表达式需要围绕表达的括号：

params =＆gt; （{foo：“ a” a}）//返回对象{foo：“ a”}

docs： https://developer.mozilla.org/en-us/docs/web/javascript/javascript/reference/reference/functions/arrow_functions/arrow_functions

doc所说的话，如果您想返回对象文字表达式没有返回键盘您需要将对象包装在括号内：

setDataInput((previousDataInput)=>({...previousDataInput, name:event.target.value}))

或者，您可以使用返回 keywoard这样：

setDataInput((previousDataInput)=>{
 return {...previousDataInput, name:event.target.value};
})

Answer 2

您必须在setDatainput中返回对象，而不是箭头函数