React中无法迭代更新useState数组的问题求助

问题核心 #

点击按钮触发子组件Input的useEffect后，调用父组件Column的getInput更新数组状态时，每次仅能保留当前索引的输入值，之前输入的内容全部丢失，最终数组只有最后一次更新的索引有值，其余均为undefined。

根本原因 #

并非React状态批处理机制导致，核心问题是闭包陷阱：

• Column组件中的getInput函数在定义时，捕获了当前渲染周期的values初始状态值（全undefined的数组）。
• 点击按钮后，所有Input的useEffect依次调用getInput，此时多次执行setValues都是基于初始的values修改，而非实时更新后的最新状态。
• 即便React做状态批处理，每次修改都依赖旧状态，最终只会保留最后一次修改的结果。

解决方案 #

使用React的函数式状态更新，让setValues接收一个函数，该函数会自动获取当前最新的状态值，基于此进行修改，彻底避开闭包陷阱。

修改后的代码示例 #

import { myDataArray } from "./myData"

const Column = ({idx, requestInput}) => { // 移除重名的props.getInput，避免变量冲突
  const [values, setValues] = useState([...Array(7)]);
  const [request, setRequest] = useState(0)

  const getInput = (input, index) => {
    // 函数式更新：基于最新的prevValues修改数组
    setValues(prevValues => prevValues.map((d, i) => (i === index ? input : d)));
  };

  return(
      <>
        <Button onClick={() => setRequest(prev => prev + 1)} /> {/* 按钮计数也用函数式更新，避免闭包问题 */}
         {myDataArray.map( (d, idx) => (
           <Input key={d.title} request={request} idx={idx} getInput={getInput} />
         ))}
     </>
  )
}

const Input = ({request, idx, getInput}) => {

  const [value, setValue] = useState();
  const [error, setError] = useState(false);

  const handleChange = (event) => {
    if (event.target.value >= 0 && event.target.value <= 1) {
      setValue(event.target.value);
    } else {
      setError(true);
      setValue("");
      setTimeout(() => setError(false), 1500);
    }
  };

   useEffect(() => {
     getInput(value, idx);
   }, [request]); // 点击按钮时触发状态同步

   return (
        <input onChange={handleChange} />
  )
}

额外优化点 #

• 按钮的setRequest改用函数式更新，避免频繁点击时因闭包导致的计数错误。
• 移除了Column props中重名的getInput，消除变量冲突隐患。

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