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

Question

我有一个包含测验的对象，它是一个对象数组。我希望用户输入问题 correct_answer 和 correct_answers 并将其发送到我的数据库，但它没有这样做，它发送的是空的。我在使用 onInputChange 函数使我的输入通过

时遇到问题

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>

这是输出，测验部分留空

 {
        "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-fiinal-form to better manage your forms, with react-final-form-arrays

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

I want to add user input object of an array with react useState(), when I send it it does not update the questions?

javascript

user-input

dom-events

reactjs

use-state