Question

我想创建一个行为类似于 <textarea> 的 console.log。

class Console extends Component {
...
    async componentDidMount() {
        for (var i = 1; i < 10; i++) {
           setTimeout(() => {this.setState({message: 'updateMessage' + millis()}, 1000);
        }
    }
    render() {
       return <textarea>{this.state.messsage}</textarea>
    }
}

我希望这段代码能够实时更新 UI。问题是 componentDidMount 会等到所有 setTimeout 的函数在循环中执行完毕，然后一次性呈现所有内容。

我有什么误解吗？谢谢

Answer 1

你的 setTimeout 都是同时解析的，而且你的消息不在数组中，因此每次都会被覆盖。

如果我使用延迟承诺，而不是设置超时，那么状态将相应地更新。

const delay = async () => {
  await new Promise((resolve) => {
    setTimeout(resolve, 1000)
})
}

示例：codesandbox

class Console extends Component {
...
    async componentDidMount() {
        for (var i = 1; i < 10; i++) {
           this.setState({message: 'updateMessage' + millis()})
           await delay()
        }
    }
    render() {
       return <textarea>{this.state.messsage}</textarea>
    }
}

使用异步 ComponentDidMount 渲染组件

1 个答案: