为什么 setTimeout 返回数值答案

【问题标题】：Why setTimeout is returning number values为什么 setTimeout 返回数值
【发布时间】：2019-03-29 08:54:23
【问题描述】：

只有当后端没有任何内容时，我才尝试获取 No list items。现在，onload，我在获取数据之前获得了加载微调器和 No List items。

所以，我想我会添加一个超时来处理这个问题，这样它只会在提取完成后显示，并且没有项目

 getList() {
        if(this.state.list.length != 0){
            return (this.state.list.map(data => {
              return <div data={data} key={data.id}/>
            }))
        }else{
            return <div>No List items</div>
        }
    }

render() {
        return (
            <div>  
                <Spinner active={this.state.active} />
                <div>{setTimeout(this.getList, 1000)}</div>
            </div>
        );
    }
}

当我使用它时，我会在浏览器上获取数字。在 componentDidMount 上微调器的活动状态更改为 false

【问题讨论】：

setTimeout 返回一个可以传递给 clearTimeout 的 ID。 setTimeout 不会也不能返回回调的返回值，因为setTimeout 在调用它的那一刻实际上并没有执行该函数。在您的情况下使用 setTimeout 没有意义。
@FelixKling 那么你有什么建议，我应该在获取完成之前延迟“无列表项”标签。我无法返回值
您最初可以将this.state.list 设为null，这意味着尚未从服务器获取数据。或者，假设在获取数据时this.state.active 为true，一旦获取数据，则为false，您只需执行{this.state.active ? null : this.getList()}。
查看我的更新评论。如果this.state.list 是null，你当然不会打电话给getList。我们不知道您的其余代码以及您如何处理 this.state.list，因此我们必须相信您知道如何将建议应用于您的情况。

标签： javascript reactjs

【解决方案1】：

这就是 setTimeout 返回的内容：一个 id 号，如果您想取消超时，您可以稍后使用它。

渲染方法是同步的。如果您不想在没有数据的情况下渲染任何内容，那么您可以让渲染返回null。然后在componentDidMount中，做任何你需要的异步工作，完成后调用this.setState更新状态并重新渲染（这次没有null）

【讨论】：

当我没有得到任何东西时，我想渲染“No items”
你也可以这样做。也许从 state = {list: null} 开始，然后获取数据，然后将状态更新为具有空数组或填充数组。如果列表为空，则不渲染。如果列表为空，则呈现“无项目”消息。如果它既不是 null 也不是空的，则渲染相关的 div。
太好了，我会试试这个。感谢您的回复

【解决方案2】：

这里不要使用超时。我只是将列表的初始状态设置为空。然后翻转你的逻辑，这样它就是：

getList() {
        if(this.state.list && this.state.list.length == 0){
            return <div> No List items </div>
        }else{
            return (this.state.list.map(data => {
              return <div data={data} key={data.id}/>
            }))
        }
    }

有 100 种方法可以解决此问题，但根据您的代码，这是最简单的方法。也不要忘记 != 和 !== 之间的区别。

【讨论】：

感谢您的回复！

【解决方案3】：

class Items extends React.Component {
    constructor(props) {
        super();
        this.state = {
            active: true,
            is_loading: false,
        }
    }

    componentDidMount() {
        this.timeout_number = setTimeout(() => {
            this.setState({
                active: false,
                is_loading: true
            });
        }, 1000);
    }

    componentWillUnmount() {
        clearTimeout(this.timeout_number);
    }

    getList() {
        if(this.state.list.length) 
            return this.state.list.map(data => <div data={data} key={data.id}/>)
        else
            return <div>No List items</div>
    }

    render() {
        return (
            <div>  
                <Spinner active={this.state.active} />
                {this.state.is_loading 
                    ? this.getList() 
                    : null}
            </div>
        );
    }
}

export default Items;

【讨论】：