問(wèn)題：
在最開(kāi)始搭建選項(xiàng)卡的時(shí)候，我的js代碼是這樣的
import React, { Component } from 'react'
import './css/02-maizuo.css'
export default class App extends Component {
state = {
list: [
{
id: 1,
text: '電影'
},
{
id: 2,
text: '影院'
}, {
id: 3,
text: '我的'
},
],
current: 0
}
render() {
return (
<div>
<ul>
{this.state.list.map((item, index) => {
<li
key={item.id}
className={this.state.current === index ? 'active' : ''}
onClick={() => this.handleClick(index)}
>
{item.text}
</li>
})}
</ul>
</div>
)
}
handleClick(index) {
console.log(index);
this.setState({
current: index
})
}
}
有問(wèn)題的部分：
終端有提示警告信息：
解決辦法
?第一反應(yīng)是這里不能使用map進(jìn)行遍歷數(shù)組，于是換成了forEach,但是foreach方法并不返回一個(gè)新的數(shù)組，而只是對(duì)原來(lái)的數(shù)組進(jìn)行遍歷。如果使用forEach遍歷數(shù)組，此時(shí)沒(méi)有返回任何JSX元素，因此<li></li>標(biāo)簽還是不會(huì)被渲染出來(lái)的。
所以，還是得使用map方法，用來(lái)返回新的數(shù)組，返回的結(jié)果包含每個(gè)元素的處理結(jié)果。針對(duì)終端的警告，是因?yàn)樵诩^函數(shù)中使用了大括號(hào) {} 來(lái)包裹 JSX,但是卻沒(méi)有顯式的返回一個(gè)值，在React當(dāng)中，當(dāng)使用 {}? 來(lái)包裹 JSX的時(shí)候，如果想返回一個(gè)值，這個(gè)時(shí)候需要顯式的使用 return 語(yǔ)句。而如果將箭頭函數(shù)的大括號(hào)? {} 替換成小括號(hào) () ,這個(gè)時(shí)候，就不需要顯式的使用return 語(yǔ)句了，也就是
?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-836559.html
問(wèn)題不大，但是芝士又漲嘍！~文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-836559.html
到了這里，關(guān)于react使用Map方法遍歷列表不顯示的問(wèn)題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
