如何在反应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>`

Below is the load more code

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

I want to display 012 (when i click load more 456 should appear) 345 678

Instead I'm getting 012 123 234

Is there any way to increment the value of i after i+2

Answer 1

In your callback, i is the index of the entry ( 0 for the first entry, 1 for the second, etc.), so if you're outputting three items per entry and you want to start counting from 1, the three items will be i * 3 + 1 , i * 3 + 2 , and 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>
    );
})

(Or each div could be <div>{++i}</div> .)

Live Example:

 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>

I changed a couple of other things in the live example:

• You can use destructuring to make your setState call a bit more concise if you like:

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

• I bound loadmore in the constructor rather than recreating a function on every render in onClick .
• You had a typo in your JSX, missing / on the closing </div> tags