添加 onChange（具有 setState）后无法写入文本字段 ReactJS

问题描述

我想创建通过useState更新值的投票/练习表单。 因此，我创建了handleChange()来处理来自输入表单的更新，并且对于我的大部分输入字段都可以正常工作，除了将 state 存储为 object 的字段（我有 state 字段调用答案以保留我的民意调查中的多个答案选择/exercise as answer1 ... answer4 ) 像这样

const [pollValues, setpollValues] = useState({
    name: "",
    question: "",
    type: "",
    answers: {
      answer1: "",
      answer2: "",
      answer3: "",
      answer4: "",
    },
  }); 

和handleChange()通过传递事件表单输入表单来使用：

 function handleChange(e) {
    const { name, value } = e.target;
    console.log(name, value);

    setpollValues((prev) => ({
      ...prev,
      [name]: value,
    }));
  }

并将其用于处理带有名称的输入（位于主 return() 中），问题，类型工作得很好。 但是民意调查回答了选择，我在同一个文件中创建了一个子组件，并将名称作为道具传递来识别选择

     <ChoiceAnswer type="required" name="answer1" choiceNumber="1" />
     <ChoiceAnswer type="required" name="answer2" choiceNumber="2" />
     <ChoiceAnswer type="optional" name="answer3" choiceNumber="3" />
     <ChoiceAnswer type="optional" name="answer4" choiceNumber="4" />

 const ChoiceAnswer = (props) => {
    const { type, choiceNumber, name } = props;
    if (type == "required") {
      return (
        <div
          className="d-flex flex-column "
          style={{
            rowGap: "0.5rem",
            margin: "0px",
            padding: "0px",
            width: "100%",
          }}
        >
          <div
            className="d-flex align-items-center"
            style={{
              padding: "1rem",
              border: "1.5px #ccc solid",
              borderRadius: "1rem",
              columnGap: "1rem",
            }}
          >
            <div style={{ width: "7rem" }}>
              <h5>ตัวเลือกที่ {choiceNumber}</h5>
              <p style={{ color: "red" }}>* จำเป็น</p>
            </div>

            <input
              type="text"
              style={{ width: "100%" }}
     
              id={name}
              name={name}
              placeholder="ใส่คำตอบ"
              onChange={handleChange}
              required
            ></input>
          </div>
        </div>
      ); else if (type == "optional") {...}

仅在答案中出现的问题，无法在文本字段中键入文本（尝试控制台日志，发现它一次只能更新 1 个字符，无法键入字符串）但是如果我删除 setState 它通常可以键入。 所以，我不知道是什么导致我的答案字段无法输入和使用 handleChang() 来更新它们的值。