React中如何动态添加值并动态访问Doctor状态的数组属性

要把硬编码的day1改成动态属性名，核心是用JavaScript对象的方括号访问语法替代点语法，具体实现如下：

1. 定义动态属性名的状态（按需添加） #

如果需要切换不同日期（比如从day1切到day2），先声明状态变量存储当前要渲染的日期属性名：

import { useState } from 'react';

function DoctorSchedule() {
  // 模拟Doctor状态数据
  const [Doctor, setDoctor] = useState({
    day1: [{ start: '9:00' }, { start: '10:00' }],
    day2: [{ start: '14:00' }, { start: '15:30' }]
  });
  // 动态控制要渲染的日期，默认显示day1
  const [activeDay, setActiveDay] = useState('day1');

  // ...其他组件逻辑
}

2. 替换硬编码为动态访问 #

把原来的Doctor.day1改成Doctor[activeDay]，就能根据activeDay的值动态渲染对应数组内容：

{Doctor[activeDay] && Doctor[activeDay].map((row) => (
  <Link className="timing" to={''} key={row.start}>
    <span>{row.start}</span> <span>AM</span>
  </Link>
))}

注意：给map生成的每个元素加key属性，这是React列表渲染的强制要求，避免控制台警告。

3. （可选）添加切换动态值的交互 #

如果需要手动切换日期，添加按钮触发状态更新即可：

<div className="day-tabs">
  <button onClick={() => setActiveDay('day1')}>Day 1</button>
  <button onClick={() => setActiveDay('day2')}>Day 2</button>
</div>

更安全的容错写法 #

如果Doctor可能未初始化，或者activeDay对应的属性不存在，用可选链操作符避免页面报错：

{Doctor?.[activeDay]?.map((row) => (
  <Link className="timing" to={''} key={row.start}>
    <span>{row.start}</span> <span>AM</span>
  </Link>
))}

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