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之后插入新行，而在迭代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>

Answer 2

问题是

<Parent taco={taco}/>

第一父母不希望吃炸玉米饼。

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

Answer 3

首先在TacosList创建原子组件（div，span或IMG）以显示炸玉米饼列表。

TacosList的映射仅在第一级起作用，因为每个项目都是一个JavaScript对象，这意味着您必须知道键，具有值或使用Object.keys和Object.items显示名称。

Answer 4

好吧，你做错了很多事情。 首先，我不明白为什么您要在对象中使用名字作为关键字，但是不要紧。 其次，您应该使用状态来存储和处理数据，因为有setState({})函数可以在状态更改时更新DOM，您可以在线找到许多很棒的教程。 那为什么要从子组件中调用父组件呢？ :)很愚蠢，但这是解决方案，因此您可以了解其工作原理并继续前进。

 class TacosList extends React.Component { render() { return ( <div className="tacos-list"> {this.props.tacos.map((taco) => { return <h1> {taco.ingredient} </h1> })} </div> ); } } class Parent extends React.Component { constructor(props){ super(props) this.state = { tacos: [{ ingredient: "Guacamole" }, { ingredient: "Beef" }, { ingredient: "Bean" }] } } render() { return ( <div className="parent-component"> <h3>List of tacos:</h3> <TacosList tacos={this.state.tacos}/> </div> ) } } ReactDOM.render(<Parent />, document.getElementById("root"));

 <!DOCTYPE html> <html> <head> <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> </head> <body> <div id="root"></div> </body> </html>

React - 迭代数组中的键值对

问题描述

3 个解决方案

解决方案1
2 已采纳 2017-10-09 01:02:10

解决方案2
1 2017-10-09 00:29:26

解决方案3
0 2017-10-09 00:53:26

解决方案4
0 2017-10-09 01:02:59

React - 迭代数组中的键值对

问题描述

3 个解决方案

解决方案1 2 已采纳 2017-10-09 01:02:10

解决方案2 1 2017-10-09 00:29:26

解决方案3 0 2017-10-09 00:53:26

解决方案4 0 2017-10-09 01:02:59

解决方案1
2 已采纳 2017-10-09 01:02:10

解决方案2
1 2017-10-09 00:29:26

解决方案3
0 2017-10-09 00:53:26

解决方案4
0 2017-10-09 01:02:59