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

问题是

<Parent taco={taco}/>

第一位家长并不期待一个taco财产。

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

Answer 2

您的问题是，您在 return 之后进入了一个新行，它正在返回 undefined ，同时迭代{{1} }列表。

此外，如果您在 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"));

Answer 3

启动创建原子组件（div，span或IMG）以在import csv my_str = '"hello, how are you","how old are you"' my_csv = [my_str] # Wrap in a list because the csv module expects it csv_reader = csv.reader(my_csv) final_array = next(csv_reader)中显示炸玉米饼列表。

TacosList中的地图仅适用于第一级，因为每个项目都是JavaScript对象，这意味着您必须知道密钥，拥有该值，或使用TacosList和{ {1}}显示名称。

Answer 4

嗯，你做错了很多事。首先，我不明白为什么你的名字是你的对象的关键，但没关系。其次，你应该使用state来存储和操作数据setState({}) 在状态变化上更新DOM的功能，你可以在网上找到很多很棒的教程。那你为什么要从Child组件调用Parent组件？ :)傻但这里是解决方案，所以你可以知道它是如何工作的并继续前进。

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 - 迭代数组中的键值对

4 个答案: