如果元素存在，则进行条件渲染答案

【问题标题】：Conditional rendering if elements exist如果元素存在，则进行条件渲染
【发布时间】：2019-12-17 11:34:07
【问题描述】：

我有 React 组件，它使用 axios 从 MySQL 调用数据并渲染它。问题是，如果我想显示消息，如果我没有任何数据。我的代码如下所示。

    render() {

    return (
        <div>
            {this.state.elements.length < 1 ? (
                <p>Elements doesn't exist</p>
            ) : (
                <ul>
                    { this.state.elements.map(element => <li key={element.id}>{element.name}</li>)}
                </ul>
            )}
        </div>

    );
}

此代码有效，但在渲染列表之前显示错误半秒。我知道问题是延迟向 MySL 请求并调用数据，但我该如何避免呢？

【问题讨论】：

我猜你可以为请求设置标志。例如，在初始状态下，您将“初始化”字段设置为 false。在请求之后，您可以 setState 并将其更新为 true。在渲染方法中，您还需要更新条件以在初始化为 false 时显示微调器或其他内容，因此如果请求未完成，您将看不到“元素不存在”消息。

标签： javascript mysql ajax reactjs axios

【解决方案1】：

添加 setTimeout 使其默认等待 1 分钟，然后从数据库中渲染数据

【讨论】：

【解决方案2】：

只需如下更改您的条件即可。它工作正常，即使您的 MySL 请求需要更多时间来加载数据

    return (
        <div>
            {this.state.elements && this.state.elements.length > 0 ? (
                 <ul>
                    { this.state.elements.map(element => <li key={element.id}>{element.name}</li>)}
                </ul>
            ) : (
                <p>Elements doesn't exist</p>
            )}
        </div>

    );

【讨论】：

【解决方案3】：

为了避免这种情况，您需要在解决 API 调用之前显示某种加载消息。

axios.get('https://api.myjson.com/bins/1d36cl')
        .then(function (response) {
        this.setState({loading: false})
      })


  }

现在在渲染函数中，

render() {
if(this.state.loading) return (<Loading/>)

    return (
        <div>
            {this.state.elements.length < 1 ? (
                <p>Elements doesn't exist</p>
            ) : (
                <ul>
                    { this.state.elements.map(element => <li key={element.id}>{element.name}</li>)}
                </ul>
            )}
        </div>

    );
}

现在加载组件将一直显示，直到您从 API 调用中获得响应。

【讨论】：