React中通过State更新输入框值失败问题求助

你在onChange里的写法直接修改了state的引用对象，React无法检测到变化：

let x = sections; // 只是复制了state的引用，x和sections指向同一个对象
x[currentPage - 1].questions[index].question = e.target.value; // 修改原对象的属性
setSections(x); // 传入的还是原引用，React认为state没变化，不触发重渲染

React的state更新遵循不可变性原则，只有当state的引用发生变化时，才会触发组件重新渲染。直接修改原state对象的内部属性，不会改变引用，所以输入框绑定的value不会更新。

需要创建state的深拷贝，确保每一层级都是新的对象/数组，让React能检测到变化。以下是两种可行的写法：

方法1：逐层手动拷贝（无额外依赖） #

onChange={(e) => {
  // 1. 拷贝整个sections数组
  const updatedSections = [...sections];
  // 2. 拷贝当前要修改的section对象
  const targetSection = {...updatedSections[currentPage - 1]};
  // 3. 拷贝该section下的questions数组
  const updatedQuestions = [...targetSection.questions];
  // 4. 拷贝要修改的question对象并更新内容
  updatedQuestions[index] = {
    ...updatedQuestions[index],
    question: e.target.value
  };
  // 5. 把更新后的数组/对象层层放回
  targetSection.questions = updatedQuestions;
  updatedSections[currentPage - 1] = targetSection;
  // 6. 更新state
  setSections(updatedSections);
}}

方法2：函数式更新（更安全，避免闭包问题） #

如果存在并发更新场景，建议使用函数式更新，直接基于上一次的state快照修改：

onChange={(e) => {
  setSections(prevSections => {
    const updatedSections = [...prevSections];
    const targetSection = {...updatedSections[currentPage - 1]};
    const updatedQuestions = [...targetSection.questions];
    updatedQuestions[index] = {
      ...updatedQuestions[index],
      question: e.target.value
    };
    targetSection.questions = updatedQuestions;
    updatedSections[currentPage - 1] = targetSection;
    return updatedSections;
  });
}}

1. 修复useCallback的依赖项
   你的getQuestionnaire函数依赖accessToken和questionnaireUUID，但useCallback的依赖数组是空的，会导致闭包捕获旧值，应该补充依赖：

let getQuestionnaire = useCallback(async () => {
  // ...现有请求代码
}, [accessToken, questionnaireUUID]); // 添加依赖

2. 调整loading状态的时机
   当前useEffect里setLoading(false)会在getQuestionnaire调用后立即执行（不等请求完成），可能导致loading提前消失，建议放在请求完成后：

useEffect(() => {
  const fetchData = async () => {
    await getQuestionnaire();
    setLoading(false);
  };
  if (loading) {
    fetchData();
  }
}, [getQuestionnaire, loading]);

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