javascript - React-遍历数组中的键值对

我无法获取此代码段以输出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"));

最佳答案

您的问题是您要在return之后插入新行，该行在迭代undefined列表时将返回tacos。

此外，如果在<Parent />中调用<TacosList />，则将创建无限循环渲染

您可以创建一个新的组件来渲染项目，也可以在<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>