Javascript 等待贴图函数中的所有元素都已渲染

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

有人知道我怎样才能等到一切都完成了吗

我已经尝试过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>
    );
}

---

除了拼写错误之外，出现此问题的原因是ref回调在该组件呈现之前不会为this.items赋值。componentDidMount在第一次调用render后调用，直到组件卸载和重新装载后才会再次调用

---

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

您是手动插入此代码还是复制粘贴？你已经把物品放了，但是在你的回报中你称之为{item}这两个东西是不一样的。@Joshuauunderwood是的，我只是把它改得尽可能简单。项目正在显示，就在componentDidMount方法中this.items是空的顺便问一下，手卡住是什么意思？我想我知道，但不是100%的意思是你在这里输入的。抱歉，让我尝试一下我的答案。是的，问题是我在setInterval调用中更新状态，所以它的组件每20毫秒更新一次-有意义吗？真是进退两难。根据您对ref的需求，您仍然应该使用componentDidUpdate，并且只有在您使用完ref后才触发setInterval，这当然会导致您有几个setInterval调用，因此我建议您要么结合使用clearInterval，要么使用setTimeout，更好地理解您想要的我可能能帮上更多的忙我会想办法让你知道我的想法