我在 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 中的任何其他项目条目。这似乎是一个如此简单的问题,但我就是无法弄清楚问题是什么。控制台没有报错,只是不显示。
最佳答案
因为 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>
关于javascript - React 不会将条目发送到 DOM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51584416/