Итерация массива задержки в React

Question

У меня есть этот массив, который я хочу повторить. Мне нужно отложить его на пару секунд до следующего.

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

Начальное состояние этого массива всегда больше одного. Для целей пользовательского интерфейса я хочу, чтобы они загружались один за другим в DOM.

Answer 1

Функция визуализации реакции синхронна. Также javascript-карта является синхронной. Поэтому использование таймеров здесь не является правильным решением.

Вы можете, однако, в вашем компоненте состояния, следить за предметы, которые приданы и обновлять это состояние с помощью JavaScript таймеров:

Для примера реализации проверить это 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) 
    } 

})