React如何通过动态Prop索引获取State中的对象属性值

在JavaScript/React中，要实现这种动态拼接键名并取值的需求，直接用对象的方括号访问语法即可，具体操作如下：

1. 拼接目标键名：把固定前缀name和传入的数字索引index拼接成完整的键名字符串（比如index=1时得到name1）
2. 用方括号[]从State对象中取出对应值

完整代码示例（React函数组件） #

import { useState } from 'react';

function TargetComponent({ index }) {
  // 你的State结构
  const [stateData, setStateData] = useState({
    name1: "Hello",
    name2: "World",
  });

  // 拼接动态键名
  const targetKey = `name${index}`;
  // 获取对应值，可选添加默认值避免显示undefined
  const targetValue = stateData[targetKey] ?? '无对应值';

  return (
    <div>{targetValue}</div>
  );
}

关键细节 #

• 不能用.语法（比如stateData.name1），因为.只能访问固定名称的属性，动态键名必须用[]
• 数字类型的index会被模板字符串自动转为字符串，和name拼接后正好匹配State中的键名
• 如果担心索引对应的键不存在，可以用??（空值合并运算符）或||设置默认值，避免页面显示异常

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