如何在反應js中增加map function

Question

`{Array.apply(null, {length:this.state.length}).map((value, i) => ( 
<div>
<div>{i}</div>
<div>{i+1}</div>
<div>{i+2}</div>
</div>)}
<button onClick={()=>this.loadmore(event)}>Load More</button>`

下面是加載更多代碼

public loadmore(e)
{
  e.preventDefault()
  this.setState(prevState => ({length:prevState.length+1}))
}

我想顯示 012 （當我點擊加載更多 456 應該出現） 345 678

相反，我得到的是 012 123 234

有沒有辦法在 i+2 之后增加 i 的值

Answer 1

在您的回調中， i是條目的索引（第一個條目為0 ，第二個條目為1 ，等等），因此如果您要為每個條目輸出三個項目並且您想從 1 開始計數，則這三個項目將是i * 3 + 1 、 i * 3 + 2和i * 3 + 3 ：

Array.from({length: this.state.length}).map((value, i) => {
    i *= 3;
    return (
        <div>
            <div>{i + 1}</div>
            <div>{i + 2}</div>
            <div>{i + 3}</div>
        </div>
    );
})

（或者每個 div 可以是<div>{++i}</div> 。）

現場示例：

 class Example extends React.Component { constructor(props) { super(props); this.state = {length: 1}; this.loadmore = this.loadmore.bind(this); } loadmore() { this.setState(({length}) => ({length: length + 1})); } render() { const {length} = this.state; const divs = Array.from({length: this.state.length}).map((value, i) => { i *= 3; return ( <div> <div>{i + 1}</div> <div>{i + 2}</div> <div>{i + 3}</div> </div> ); }); return ( <div> {divs} <input type="button" onClick={this.loadmore} value="Load More" /> </div> ); } } ReactDOM.render(<Example/>, document.getElementById("root"));

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

我在現場示例中更改了其他一些內容：

• 如果您願意，可以使用解構使您的setState調用更簡潔：

   this.setState(({length}) => ({length: length + 1}));

• 我在構造函數中綁定了loadmore ，而不是在 onClick 的每個渲染上onClick 。
• 你的 JSX 中有錯字，在結束</div>標記上缺少/