React中子传父更新对象数组后页面导航数据丢失问题求助

你现在的问题核心是没有用React状态管理数据，而是用普通let声明数组。React组件每次重新渲染（包括导航返回时组件重新挂载），let Data都会重新执行，把数组重置为初始值，之前修改的内容自然丢失。另外还有两个细节问题：foreach是拼写错误（应为forEach，JavaScript方法名大小写敏感）；直接修改数组内对象的属性，即使后续改成状态，也可能因未创建新引用导致React无法检测到变化，无法触发组件更新。

1. 改用React状态管理数据 #

把普通变量换成useState状态，让React追踪数据变化，组件重新渲染时不会丢失数据：

import { useState } from 'react';

const Parent = () => {
    // 用useState替代let，初始化状态数组
    const [data, setData] = useState([
        {name: 'item-1', quantity: 0},
        {name: 'item-2', quantity: 0},
        {name: 'item-3', quantity: 0},
        {name: 'item-4', quantity: 0},
        {name: 'item-5', quantity: 0},
        {name: 'item-6', quantity: 0},
    ]);

    // 后续修改getData方法...
}

2. 遵循React不可变更新原则 #

不能直接修改原状态里的对象，必须创建新的数组和对象，保证状态更新是不可变的，这样React才能检测到变化并触发组件更新：

const getData = (updatedItems) => {
    // 遍历子组件传回的数组，生成新的状态数组
    const newData = data.map(item => {
        const updatedItem = updatedItems.find(x => x.name === item.name);
        if (updatedItem) {
            // 返回新对象，不修改原状态对象
            return {...item, quantity: item.quantity + updatedItem.quantity};
        }
        return item;
    });
    // 用setData更新状态
    setData(newData);
}

3. 持久化数据（可选，解决页面刷新/跨导航数据保留） #

如果需要导航离开再返回、甚至刷新页面后仍保留数据，要把数据存入localStorage：

import { useState, useEffect } from 'react';

const Parent = () => {
    // 初始化时优先从localStorage读取数据，无数据则用默认值
    const [data, setData] = useState(() => {
        const savedData = localStorage.getItem('itemData');
        return savedData ? JSON.parse(savedData) : [
            {name: 'item-1', quantity: 0},
            {name: 'item-2', quantity: 0},
            {name: 'item-3', quantity: 0},
            {name: 'item-4', quantity: 0},
            {name: 'item-5', quantity: 0},
            {name: 'item-6', quantity: 0},
        ];
    });

    // 状态变化时自动保存到localStorage
    useEffect(() => {
        localStorage.setItem('itemData', JSON.stringify(data));
    }, [data]);

    const getData = (updatedItems) => {
        const newData = data.map(item => {
            const updatedItem = updatedItems.find(x => x.name === item.name);
            if (updatedItem) {
                return {...item, quantity: item.quantity + updatedItem.quantity};
            }
            return item;
        });
        setData(newData);
    }

    return (
        <>
            <Child getData={getData} data={data} />
        </>
    )
}

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