React - 迭代数组中的键值对答案

【问题标题】：React - iterating over key value pairs in arrayReact - 迭代数组中的键值对
【发布时间】：2017-10-09 09:08:34
【问题描述】：

我无法让这个 sn-p 输出 tacos

我不知道我做错了什么

    let tacos = [{ John: "Guacamole" }, { Sally: "Beef" }, { Greg: "Bean" }];

class Parent extends React.Component {

  render() {
    return (
      <div className="parent-component">
        <h3>List of tacos:</h3>
        <TacosList tacos={tacos} />
      </div>
    );
  }
}

class TacosList extends React.Component {
  render() {
    return (
      <div className="tacos-list">
        {this.props.tacos.map((taco) => {
          return 

          <Parent taco={taco}/>

        })}
      </div>
    );
  }
}

render(<Parent />, document.getElementById("root"));

【问题讨论】：

看起来你已经用Parent定义了一个TacosList，你已经用TacosList定义了Parent，它会创建一个无限循环.
也许这个例子对你有用codepen.io/gaearon/pen/NRZYGN?editors=0010
嗯，我饿了。

标签： javascript arrays reactjs

【解决方案1】：

您的问题是您在 return 之后进入一个新行，它在迭代 tacos 列表时返回 undefined。

此外，如果您在 <TacosList />

中调用 <Parent />，您将创建一个无限循环渲染

您要么创建一个新组件来呈现项目，要么在 <TacosList /> 组件中执行此操作

let tacos = [{
  person: "John",
  ingredient: 'Guacamole'
 }, {
  person: 'Sally',
  ingredient: 'Beef'
 }, {
  person: 'Greg',
  ingredient: 'Bean'
 }];

class Parent extends React.Component {

  render() {
    return (
      <div className="parent-component">
        <h3>List of tacos:</h3>
        <TacosList tacos={tacos} />
      </div>
    );
  }
}

class TacosList extends React.Component {
  render() {
    return (
      <div className="tacos-list">
        {this.props.tacos.map((taco, index) => (
        	<p key={index}>{taco.person}: {taco.ingredient}</p>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<Parent />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root">
</div>

【讨论】：

【解决方案2】：

问题是

<Parent taco={taco}/>

第一个父母不希望有 taco 财产。

其次，我认为您打算实际渲染元素以在那里显示 taco 信息，而不是每个 taco 的父组件。

【讨论】：

【解决方案3】：

首先创建一个原子组件（div、span 或 IMG）以在 TacosList 中显示 tacos 列表。

TacosList 中的映射只在第一层起作用，因为每个项目都是一个 JavaScript 对象，这意味着你必须知道键，才能拥有值，或者使用 Object.keys 和 Object.items 来显示名字。

【讨论】：