我想添加一个数组的用户输入 object 和 react useState()，当我发送它时它不更新问题？

Question

我有一个 object，它有一个对象数组测验。 我希望用户输入问题、correct_answer 和 incorrect_answers 并将其发送到我的数据库，但它没有这样做，它发送的是空的。 我在使用 onInputChange function 进行输入 go 时遇到问题

 const [questions, setQuestions] = useState({ quizes:[{ question: '', correct_answer: '', incorrect_answers:[] }] }); useEffect(() => { loadQuestions(id); }, []); const loadQuestions = async ( id ) => { const result = await api.get(`/assignments/${id}`); setQuestions(result.data); }; // const {quizes,question, correct_answer} = questions const onInputChange = e => { const value = e.target.value setQuestions({...questions, [e.target.name]: value }); }; // const addQuestion = async (id) => { // await api.post(`/assignments/addquestion/${id}`); // loadQuestions(); // }; const onSubmit = async e => { e.preventDefault(); await api.post(`/assignments/addquestion/${id}`, questions); history.push("/dashboard"); }; return ( <div className="container"> {/* {console.log('this is the name of the question ** '+ questions.quizes.map(x=>x.question))} */} <div className="py-4"> <form onSubmit={e => onSubmit(e)}> {/* {questions.quizes.map(x=>{ */} <div className="form-group"> <input type="text" className="form-control form-control-lg" placeholder="Enter question" name= {questions.quizes.question} value = {questions.quizes.question} onChange={e => onInputChange(e)} /> </div> <div className="form-group"> <input type="text" className="form-control form-control-lg" placeholder="Enter question" name='correct_answer' value={ questions.quizes.correct_answer } onChange={e => onInputChange(e)} /> </div>

这是 output，测验部分留空

 {
        "createdAt": "2021-01-13T02:54:39.710Z",
        "_id": "5fff630624f06bfd45f6bcd2",
        "title": "testing this hhs",
        "quizes": [
            {
                "incorrect_answers": [],
                "_id": "5fff630d24f06bfd45f6bcd3",
                "question": "",
                "correct_answer": ""
            }
        ],
        "__v": 0
    }

Answer 1

您可以在此处找到与您要实现的目标类似的示例。

https://codesandbox.io/s/array-form-example-fg2yr?file=/src/App.js

不要忘记将代码拆分为多个组件。 您还可以使用react-final-form更好地管理您的 forms，在您的案例中使用react-final-form-arrays