Question

我正在尝试使用React从对象到达arrival但没有成功。我做错了什么？

HTML

<div id="main"></div>

JS

const buses =
  [{ "id": 1, "busNumber": "55", "arrival": "1 min"}, { "id": 2, "busNumber": "13", "arrival": "1 min"}, { "id": 3, "busNumber": "55", "arrival": "3 min"}]

const List = ({items, each}) =>

  <div className = "panel panel-default">
  <div className = "panel-heading"><h2>Bus stop</h2></div>
    <div className = "panel-body">   

      <ul className = "list-group">{items.map((item, key) =>
        <ListItem key = {key} item = {each(item)} />)}</ul>

    </div>
  </div>

const ListItem = ({item, arrival}) =>
  <li className = "list-group-item"><span className = "badge">{arrival}</span>{item}</li>


const Item = ({busNumber}) =>
  <div>{busNumber}</div>

ReactDOM.render(<List items={buses} each={Item} />, document.querySelector('#main'))

CodePen

我是React的新手，所以请原谅我的基本错误。提前谢谢。

Answer 1

您没有在CommentForm中传递到达值，这就是原因。

使用此：

ListItem

工作 CodePen 。

使用React发出检索对象的问题

1 个答案: