Verzögerte Array-Map-Iteration in React

Question

Ich habe dieses Array, das ich iterieren möchte. Ich muss es um ein paar Sekunden vor dem nächsten verschieben.

{this.props.things.map((thing, index) => { 
    return (
    <div key={index}>{thing.content}</div> 
    // Delay 1 second here 
    ) 
})} 

Der Ausgangszustand dieses Arrays ist immer mehr als eins. Für UI-Zwecke möchte ich, dass sie nacheinander in das DOM geladen werden.

Answer 1

Die Renderfunktion von react ist synchron. Auch Javascript Map ist synchron. Timer zu verwenden, ist hier nicht die richtige Lösung.

Sie kann jedoch in der Komponente Zustand, verfolgen Elemente, die diesen Zustand mit Hilfe von JavaScript-Timer gemacht und aktualisiert wurden:

Eine Beispielimplementierung überprüfen diese fiddle:

React.createClass({ 

    getInitialState() { 
    return { 
     renderedThings: [], 
     itemsRendered: 0 
    } 
    }, 

    render() { 
    // Render only the items in the renderedThings array 
    return (
     <div>{ 
     this.state.renderedThings.map((thing, index) => (
      <div key={index}>{thing.content}</div> 
     )) 
     }</div> 
    ) 
    }, 

    componentDidMount() { 
    this.scheduleNextUpdate() 
    }, 

    scheduleNextUpdate() { 
    this.timer = setTimeout(this.updateRenderedThings, 1000) 
    }, 

    updateRenderedThings() { 
    const itemsRendered = this.state.itemsRendered 
    const updatedState = { 
     renderedThings: this.state.renderedThings.concat(this.props.things[this.state.itemsRendered]), 
     itemsRendered: itemsRendered+1 
    } 
    this.setState(updatedState) 
    if (updatedState.itemsRendered < this.props.things.length) { 
     this.scheduleNextUpdate() 
    } 
    }, 

    componentWillUnmount() { 
    clearTimeout(this.timer) 
    } 

})