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