javascript - React 不会将条目发送到 DOM

Question

我在 export default class List extends React Component 中发出 AJAX 请求。它工作正常，我看到请求的数组以以下形式返回:

[{...}, {...}, ...]

return 中的每个对象的结构如下:

{
  description: "bla",
  id: "5b4915c37ae56418fcddb88f",
  link: "www.website.com",
  name: "bla",
  position: "bla",
  requirements: {
     age: 99, 
     citizenship: "bla", 
     degree: "bla"
  },
  salary: "1",
  state: "bla"
}

返回设置在组件的状态中。我的渲染函数如下所示:

render() {
    let entries = this.state.listEntries

    let mapper = entries.forEach((item,index) => {
        console.log(entries)
        return (
            <li key={index}>
                {item.name}
                {item.position}
            </li>
        )
    })

    return (
        <div className="listWrapper">
            <HeaderBar props={this.state.props}/>
            <ul className="list">
                {mapper}
            </ul>
        </div>
    )
}

React 不显示 item.name 或 item.position，或 DOM 中的任何其他项目条目。这似乎是一个如此简单的问题，但我就是无法弄清楚问题是什么。控制台没有报错，只是不显示。

Answer 1

因为 forEach 不返回任何东西，你应该在这种情况下使用 map。此外，使用 index 作为 key 会导致一些问题，因此您可以使用 item.id 而不是 index .

class App extends React.Component {
  state = {
    listEntries: [
      {
        description: "bla",
        id: "5b4915c37ae56418fcddb88f",
        link: "www.website.com",
        name: "bla1",
        position: "bla1",
        requirements: {
          age: 99,
          citizenship: "bla",
          degree: "bla"
        },
        salary: "1",
        state: "bla"
      },
      {
        description: "bla",
        id: "5b4915c37ae56468fcddb88f",
        link: "www.website.com",
        name: "bla2",
        position: "bla2",
        requirements: {
          age: 99,
          citizenship: "bla",
          degree: "bla"
        },
        salary: "1",
        state: "bla"
      }
    ]
  }
  render() {
    let entries = this.state.listEntries

    let mapper = entries.map((item) => {
      console.log(entries)
      return (
        <li key={item.id}>
          {item.name}
          {item.position}
        </li>
      )
    })

    return (
      <div className="listWrapper">
        <ul className="list">
          {mapper}
        </ul>
      </div>
    )
  }
}

ReactDOM.render(<App />, 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>