如何在React组件中遍历state对象并向子组件传递数据

你这个思路其实已经很对啦！就是遍历state里的stuff对象，把每个食谱的数据传给子组件对吧？我给你优化一下写法，让代码更简洁还符合React的最佳实践～

首先，直接用Object.entries()来遍历对象会比for...in更直观，还能避免遍历到对象原型上的额外属性。另外，React列表渲染必须给每个子元素加唯一的key属性，这能帮助React更高效地更新DOM。

优化后的完整父组件代码如下：

class ListContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      stuff: {
        "pie": ["bread", "apple"],
        "fries": ["potatoes", "oil"]
      }
    };
  }

  render() {
    return (
      <div className="recipe-list">
        {/* 用Object.entries把对象转成[key, value]数组，直接解构出食谱名和配料 */}
        {Object.entries(this.state.stuff).map(([recipeName, recipeIngredients]) => (
          <Child
            key={recipeName} // 用唯一的食谱名当key，完美符合要求
            tableName={recipeName}
            recipeData={recipeIngredients}
          />
        ))}
      </div>
    );
  }
}

对应的子组件可以这么写，用来接收并渲染数据：

// 函数式子组件示例，类组件写法也类似
const Child = ({ tableName, recipeData }) => {
  return (
    <div className="recipe-item">
      <h4>{tableName}</h4>
      <p>配料列表：</p>
      <ul>
        {recipeData.map((ingredient, idx) => (
          <li key={idx}>{ingredient}</li>
        ))}
      </ul>
    </div>
  );
};

给你划几个重点：

• Object.entries()：把对象转换成[键, 值]的数组，遍历的时候直接解构变量，比for...in少了手动取this.state.stuff[recipe]的步骤，代码更清晰。
• key属性：这个是React列表渲染的硬性要求哦，这里用食谱名称当key刚好，因为每个食谱名都是唯一的。
• 简化render逻辑：不用先声明空数组再push组件，直接在JSX里用map生成组件数组，可读性更高～

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