javascript - 模拟异步调用

Question

您好，我正在尝试了解 Promises 的工作原理以及如何模拟异步调用以用作 React 组件的测试。
我写了这段代码，但是最后的效果是立即加载数据，而不是等待延迟时间。
我哪里做错了？
提前致谢

import React, { Component } from 'react';

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

export default class Test extends Component 
{
    constructor(props) {
        super(props);

        this.state = {
            data: []
        };
    }

    componentDidMount() {
        sleep(3000).then(
            this.setState({
                data: ['val1', 'val2', 'val3']
            })
        );
    }

    render() {
        return (
            <ul>
                {this.state.data.map(function(value, index){
                    return <li key={index}>{value}</li>;
                })}
            </ul>
        )
    }
}

Answer 1

问题是您立即调用函数setState，而不是将函数引用传递给then。

您可以通过多种方式获取函数引用:一种是使用bind。改变这个:

    sleep(3000).then(
        this.setState({
            data: ['val1', 'val2', 'val3']
        })
    );

到:

    sleep(3000).then(
        this.setState.bind(this, {
            data: ['val1', 'val2', 'val3']
        })
    );

或者，您可以更明确地创建一个函数:

    sleep(3000).then(
        _ => this.setState({
            data: ['val1', 'val2', 'val3']
        })
    );