我想用“championList”中的專案創建多個選項，但我的函式只回傳一個帶有“Aatrox”的選項而忽略其他選項，我該怎么辦？
class ChampionSelect extends React.Component {
constructor(props) {
super(props);
this.state = {
champion: require('../loldata/champion.json'),
championList: ['Aatrox', 'Ahri', 'Akali', 'Akshan', 'Alistar', 'Amumu', 'Anivia', 'Annie', 'Aphelios', 'Ashe', 'Aurelion', 'Azir', 'Bard', 'Blitzcrank' ]
};
this.funcOption = this.funcOption.bind(this);
}
funcOption() {
for (let i = 0; i < this.state.championList.length; i ) {
return <option value={this.state.championList[i]}>{this.state.championList[i]}</option>
}
}
render() {
return (
<div> teste:
<select>
{this.funcOption()}
<option>teste</option>
</select>
</div>
);
}
}
export default ChampionSelect;```
uj5u.com熱心網友回復：
你可以做
this.state.championList.map((item) => (
<option value={item} key={item}>{item}</option>
))
直接進入 JSX。
foreach 的主要目的是迭代，而不是創建一些東西。
這就是為什么你應該在你的案例中使用地圖。
當你使用“return”時，你會從你的方法中退出，所以，這就是它只寫了 1 次的原因。
uj5u.com熱心網友回復：
你想要這樣的東西而不是你的選擇中的 funcOption 這樣做：
{
this.state.championList.map(champ => (
<option value={champ}>{champ}</option>
));
}
您的 funcOption 僅回傳一個選項的原因是您在 for 回圈的第一次迭代中從該函式回傳。如果您將選項保存到串列中，然后在 funcOption 結束時回傳它，它也可以作業！
uj5u.com熱心網友回復：
嘗試使用map()而不是 for 回圈。
{
this.state.championList.map(champion => (
<option value={champion}>
{champion}</option>
))
}
uj5u.com熱心網友回復：
我的評論中的建議使我們得以map實施，例如：
class ChampionSelect extends React.Component {
constructor(props) {
super(props);
this.state = {
championList: ['Aatrox', 'Ahri', 'Akali', 'Akshan', 'Alistar', 'Amumu', 'Anivia', 'Annie', 'Aphelios', 'Ashe', 'Aurelion', 'Azir', 'Bard', 'Blitzcrank']
};
this.funcOption = this.funcOption.bind(this);
}
funcOption() {
return this.state.championList.map(e => {
return <option key={e} value={e}>{e}</option>
})
}
render() {
return ( <div> teste:
<select> {
this.funcOption()
} <option>teste</option>
</select>
</div>
);
}
}
ReactDOM.render(<ChampionSelect />, document.getElementById('app'))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>請記住，映射到 React 中的某些集合還需要關鍵屬性
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/478721.html
標籤：javascript 反应