如何将嵌套数组指定内容复制到React状态的新数组中

算力阿峰

2026-8-6

解决方案

你的days是一个包裹着单个对象的数组，这个对象的键为星期名称，对应的值就是你需要的目标数据集合。可以通过以下步骤完成状态设置：

从days数组中取出唯一的外层对象（直接通过索引0访问即可）
用接收到的星期名称（比如"Monday"）作为动态键，从外层对象中提取对应的值
调用setDayValues将提取到的值更新为状态

代码示例

场景1：通过Props接收星期名称，自动更新状态

import { useState, useEffect } from 'react';

const days = [
    {
        Monday: {
            value1: 1,
            value2: 2,
            value3: 3
        },
        Tuesday: {
            value4: 4,
            value5: 5,
            value6: 6
        }
    }
];

function DayComponent({ targetDay }) {
    const [ dayValues, setDayValues ] = useState({});

    useEffect(() => {
        // 获取数组中的唯一对象
        const dayMap = days[0];
        // 动态获取对应星期的数据，不存在则设为空对象
        const selectedValues = dayMap[targetDay] || {};
        // 更新状态
        setDayValues(selectedValues);
    }, [targetDay]); // 当targetDay变化时重新执行

    return (
        <div>
            {Object.entries(dayValues).map(([key, val]) => (
                <p key={key}>{key}: {val}</p>
            ))}
        </div>
    );
}

场景2：通过事件触发（比如按钮点击）设置状态

const handleSelectDay = (dayName) => {
    const dayMap = days[0];
    setDayValues(dayMap[dayName] || {});
};

// 使用示例：<button onClick={() => handleSelectDay('Monday')}>选择周一</button>