在 React 中一一显示组件子项答案

【问题标题】：Display Components child one by one in React在 React 中一一显示组件子项
【发布时间】：2017-09-14 10:19:53
【问题描述】：

这是我的代码：

 import React, { Component } from 'react'
            import uuid from 'uuid'

            import styles from './table.css'
            import Element from '../Element'

            class Table extends Component {

                constructor(props) {
                    super(props)

                    this.state = {
                        displayedElements: [],
                        nums: Array.from(Array(118).keys()).map(x => ++x)
                    }

                }

                handleDisplayElements() {

                    console.log('hola')
                    let nums = this.state.nums
                    let randNum = nums[Math.floor(Math.random() * nums.length)]

                    if(nums.length > 0) {
                        this.props.elements.map( el => {

                            if(nums[randNum] === el.number) {
                                let newElement = {
                                    id: uuid.v4(),
                                    number: el.number,
                                    symbol: el.symbol,
                                    name: el.name,
                                    period: el.ypos,
                                    family: el.xpos,
                                    category: el.category
                                }
                                this.setState({
                                    displayedElements: this.state.displayedElements.concat(newElement),
                                    nums: this.state.nums.splice(randNum)
                                })
                            }
                        })
                    }
                }

                render() {
                    return(
                        <div className = {styles.table}>

                            { this.state.displayedElements.map( el => {
                                return(

                                    <Element
                                        id = {uuid.v4()}
                                        number = {el.number}
                                        symbol = {el.symbol}
                                        name = {el.name}
                                        category = {el.category}
                                        period = {el.period}
                                        family = {el.family}
                                    />
                                )

                                })

                            }

                            { this.handleDisplayElements() }

                        </div>
                    )
                }
            }

            export default Table

我想一个一个地随机显示Element（因为我想在之后添加一个setTimeout）。如果我在“handleDisplayElements”函数中设置状态“nums”，我只会显示一个元素。我也收到了警告

在现有状态转换期间无法更新（例如在 render 或其他组件的构造函数）。渲染方法应该是 props 和 state 的纯函数；构造函数的副作用是反模式，但可以移动到componentWillMount。

我想知道在哪里放置这个 setState 以及如何创建一个循环来显示所有子组件（元素）。

如果你能告诉我在哪里写 setTimeout 到 Elements 不会突然出现，我会非常感谢你！

【问题讨论】：

标签： javascript reactjs components settimeout

【解决方案1】：

如果你能告诉我在哪里写 setTimeout 到 Elements 不会突然出现，我会非常感谢你！

我可以想到三个解决方案：

在componentDidMount 和componentDidUpdate 上，您应该注册一个setTimeout，通过向displayedElements 添加一个元素来增加组件的状态。
该元素的父元素注册一个循环（例如使用setInterval），该循环会更改该组件的props，逐个添加元素。
您将内部元素设置为隐藏，并为它们传递延迟（每个元素都有不同的延迟）。延迟后，您移除隐藏的属性。

【讨论】：