javascript - React - 迭代数组中的键值对

Question

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

Answer 1

您的问题是您在 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>