我不知道為什么我的表沒有資料。是我要求展示的方式，{this.newItems}還是可能是什么？
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
taskList: []
};
}
componentDidMount() {
this.refreshList();
}
//refreshList Function start
refreshList = () => {
axios
.get("http://127.0.0.1:8000/list/api/rooms/")
.then(res => this.setState({ taskList: res.data }))
.catch(err => alert(err))
}
//refreshList Function end
//renderItems Function start
renderItems = () => {
const newItems = this.state.taskList;
return newItems.map(item => (
<tr key={item.id}>
<td>{item.thing1}</td>
<td>{item.thing2}</td>
<td>{item.thing3}</td>
</tr>
));
};
//renderItems Function end
render (){
return (
<div>
<Navbar/>
<table className="layout container">
<thead>
<tr>
<th>thing1</th>
<th>thing2</th>
<th>thing3</th>
</tr>
</thead>
<tbody>
{this.newItems}
</tbody>
</table>
<Footer/>
</div>
)
}
}
uj5u.com熱心網友回復：
原因是<tbody>您使用的內部標記this.newItems，它是一個區域變數，不存在于renderItems函式范圍之外。
負責呈現表資料的代碼是renderItems您創建但從未呼叫過的函式。
所以你只需要這樣做：
<tbody>
{this.renderItems()}
</tbody>
此外，在renderItems函式內部，如果您不打算修改它，則無需創建其他變數。所以它可以簡單地寫成：
renderItems = () => {
return this.state.taskList.map(item => (
<tr key={item.id}>
<td>{item.thing1}</td>
<td>{item.thing2}</td>
<td>{item.thing3}</td>
</tr>
));
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/486250.html
標籤：反应
上一篇：標簽liferay中的多個鏈接