Question

这是我的代码：

 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”函数中设置了state“nums”，我只会显示一个元素。我也收到警告

在现有状态转换期间无法更新（例如在 render或其他组件的构造函数）。渲染方法应该是道具和国家的纯粹功能;构造函数的副作用是一个反模式，但可以移动到componentWillMount。

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

如果你能让我知道在哪里写setTimeout到元素，我不会突然出现，我会非常感谢你！

Answer 1

如果你能让我知道在哪里写setTimeout到元素，我不会突然出现，我会非常感谢你！

我可以考虑三种方法来解决这个问题：

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

在React中逐个显示组件子项

1 个答案: