Question

仅当后端没有任何内容时，我才尝试获取 没有列表项 。现在，在加载时，在获取数据之前，我得到了加载微调器和 无列表项 。

所以，我想我应该添加一个超时来处理此问题，以便它仅在获取完成后才会显示，并且没有项目

 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

Answer 1

这就是setTimeout返回的：一个ID号，如果您想取消超时，可以在以后使用。

render方法是同步的。如果您不想在没有数据的情况下不渲染任何内容，则可以使渲染返回null。然后在componentDidMount中，执行所需的任何异步工作，完成后，调用this.setState更新状态并重新呈现（这次不带null）

Answer 2

不要在这里使用超时。我只是将list的初始状态设置为null。然后，只需翻转逻辑即可：

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种方法可以解决此问题，但这是基于您的代码最简单的方法。也不要忘记！=和！==之间的区别。

Answer 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;

为什么setTimeout返回数字值

3 个答案: