React Native中如何在for循环内更新useState中的对象数组？

你的代码主要有几个问题导致结果出现undefined：

• 错误将数组转为对象更新：你用{ ...initialValues }把原数组展开成了对象，而setInitialValue需要接收数组类型的状态，这直接打乱了状态结构，引发undefined。
• 循环内多次调用setState：每次循环都调用setInitialValue，不仅会触发多次不必要的重渲染，还会因为闭包特性，每次更新都依赖初始的initialValues，最终只有最后一次更新生效，还可能丢失数据。
• 变量名冲突：循环里的data变量和外层的state变量data重名，容易引发逻辑混淆。

修正后的代码 #

const [number, setNumber] = useState('1')
const [data, setData] = useState('1024')

const calculate = () => {
    if (number) {
        // 先将字符串状态转为数值类型，避免字符串相乘出错
        const num = Number(number);
        const dataVal = Number(data);
        
        let size = num * dataVal * 8;
        size = percentage(12, size) + size;

        // 生成新数组，遍历原数组并更新每个对象的time字段
        const updatedValues = initialValues.map(item => {
            const time = (size / item.value).toFixed();
            // 返回新对象，遵循React状态不可变原则
            return { ...item, time };
        });

        // 一次性更新状态
        setInitialValue(updatedValues);
    }
}

关键说明 #

1. 使用map遍历数组，返回全新的对象数组，不直接修改原状态（React要求状态不可变）。
2. 只调用一次setInitialValue，避免多次重渲染和闭包导致的状态更新异常。
3. 将外层的data变量重命名为dataVal，解决变量名冲突问题，提升代码可读性。
4. 把字符串类型的number和data转为数值类型，避免字符串拼接式的错误计算。

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