React如何遍历带数字后缀的非数组字符串？现有写法失效求助

嘿，我懂你碰到的麻烦了——你原来的写法之所以不行，是因为直接用item.strIngredient + index只是把两个字符串拼在一起，而不是去访问item对象里像strIngredient1、strIngredient2这类动态命名的属性。

核心问题说明 #

点语法（item.property）只能访问固定名称的属性，当属性名是动态生成的时候，你得用括号表示法（item[dynamicPropertyName]）来访问。你之前的代码相当于在尝试显示undefined + 0、undefined + 1这类拼接后的字符串，自然看不到想要的内容。

正确实现方式 #

这里给你两种可行的写法：

方法1：硬编码索引范围（适合知道固定数量的情况）

{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((index) => {
  // 用模板字符串生成动态属性名
  const ingredient = item[`strIngredient${index}`];
  
  // 过滤空值，避免渲染空的<p>标签
  if (!ingredient) return null;
  
  // 记得加key属性，React列表遍历必填
  return <p key={index}>{ingredient}</p>;
})}

方法2：动态提取属性（更灵活，适合不确定数量的情况）

如果不确定有多少个strIngredient开头的属性，可以先从对象里把它们筛选出来，再遍历：

// 先提取所有符合命名规则的属性值
const ingredients = Object.entries(item)
  // 筛选key以strIngredient开头的项
  .filter(([key]) => key.startsWith('strIngredient'))
  // 只保留属性值
  .map(([_, value]) => value)
  // 过滤掉空值或undefined
  .filter(Boolean);

// 遍历渲染
{ingredients.map((ingredient, idx) => (
  <p key={idx}>{ingredient}</p>
))}

关键注意事项 #

• 动态属性访问：始终用obj[property${index}]这种括号表示法处理带变量的属性名，点语法不支持动态名称。
• key属性：React要求列表的每个子元素都要有唯一的key，这里用索引是简单的选择，如果有唯一标识的属性更好。
• 空值过滤：一定要加判断过滤空内容，不然页面会出现一大堆空的段落标签，影响体验和性能。

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