React提交表单后无法清空输入框的问题如何解决？

问题根因 #

• Input组件内部的value状态仅在组件首次挂载时用当前sentence长度初始化了空数组，后续sentence更新时不会自动重置该状态，导致旧输入值一直留存
• App组件中请求句子的useEffect错误将sentence加入依赖数组，会触发请求死循环，每次更新sentence都会重新发请求拉取数据
• 提交逻辑触发后没有主动触发Input组件的输入内容重置

修复方案 #

第一步：修复App组件的useEffect依赖 #

将请求句子的effect依赖数组从[count, sentence]改为仅[count]，避免死循环：

useEffect(() => {
  axios
    .get(`###`)
    .then((response) => {
      let sentence = response.data.data.sentence;
      setSentence(sentence);
    })
    .catch((err) => {
      console.log(err);
    });
}, [count]); // 仅count变化时拉取新句子

第二步：给Input组件绑定key实现自动重置 #

给Input组件新增key属性，值绑定count，每次提交切换下一题时count更新，React会自动销毁旧Input实例、挂载新实例，自动清空所有输入状态：

<Input
  key={count} // 新增该行
  sentence={sentence}
  setNextVisible={setNextVisible}
  isNextVisible={isNextVisible}
  setScore={setScore}
  score={score}
/>

可选方案：不销毁组件的手动重置方式 #

如果希望复用Input组件实例，可以在Input内部新增useEffect监听sentence变化，主动重置输入内容：

// 加入Input组件内部
React.useEffect(() => {
  setValue(Array(sentence.length).fill(""));
}, [sentence]);

额外逻辑优化 #

现有提交逻辑只要触发就会加分，建议调整为只有猜对答案（isNextVisible为true）时才切换下一题加分，避免误提交的逻辑异常：

let handleSubmit = (e) => {
  e.preventDefault();
  if(isNextVisible) {
    setCount(count + 1);
    setScore(score + 1);
  }
};

内容的提问来源于stack exchange，提问作者Dan