Question

我有一个react组件，它映射一个对象数组，然后在屏幕上显示其内容。这非常有效，但是当我检查ul生命周期方法中的componentDidMount个子项时，它是一个空数组，但是，一秒后它会包含所有项目。

有没有人知道我怎么能等到一切都被渲染出来？

我已尝试过componentDidUpdate，但由于有setInterval方法经常运行，因此这种情况经常发生。

componentDidMount() {
    // this is an empty array here
    console.log(this.items.children);

    setInterval(() => {
        this.setState((prevState) => {
            return {
                left:  prevState.left - 1
            };
        });
    }, 20);
}


render() {

    let items = this.props.itemss.map(item => {
        return (
            <Item left={this.state.left} content={item.content} key={item.date} />
        );
    });

    return (
        <div>
            <ul ref={(el) => { this.items = el; }} >
                { items }
            </ul>
        </div>
    );
}

Answer 1

您遇到此问题的原因（除拼写错误外）是因为ref回调在该组件呈现之后才会将值赋给this.items。 componentDidMount在第一次调用render后调用，而不是在组件卸载并重新安装之前再次调用。

相反，使用在新渲染后调用的componentDidUpdate，在该方法中检查this.items是否有值。如果是，则继续，如果没有，只需从函数返回，直到下一个ref回调成功的渲染。

等到map函数中的所有元素都被渲染出来

1 个答案: