React：如果没有记录，如何显示消息[重复]答案

【问题标题】：React : How to Show Message if there is no records [duplicate]React：如果没有记录，如何显示消息[重复]
【发布时间】：2019-03-14 22:05:07
【问题描述】：

我正在处理 ReactJS 中的项目，我正在通过 API 从服务器获取数据。我做了一些搜索过滤，如果没有可用的记录，我想显示消息？我是 ReactJS 的初学者，没有太多与 ReactJS 相关的知识。有人请帮我解决这个问题吗？ .谢谢

        class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Item: 5,
      skip: 0
    }

    this.handleClick = this.handleClick.bind(this);
  }

  urlParams() {
    return `http://localhost:3001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }

  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      <div>
        <a href={this.urlParams()}>Example link</a>
        <pre>{this.urlParams()}</pre>
        <button onClick={this.handleClick}>Change link</button>
      </div>
    )
  }
}


ReactDOM.render(<Example/>, document.querySelector('div#my-example' ))

【问题讨论】：

@NilsKähler，请检查代码，我已经更新了我的问题
不要破坏帖子。
其实这个问题已经更新了。这就是我再次发布它的原因
这并没有改变你不应该破坏帖子的事实。要么将其编辑为更好的问题，要么将其删除。在此之前，我将回滚修订版。

标签： javascript reactjs ecmascript-6 semantic-ui-react

【解决方案1】：

您需要考虑以下几点：

数据正在加载
数据加载完毕，找到结果
数据加载完毕，未找到结果
API 调用失败，服务器错误，其他问题（此答案不会涉及）

这是一个涵盖前三点的简化示例。

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            data: []
        };
    }
    componentDidMount() {
        // simulating API response
        setTimeout(() => {
            this.setState({
                loading: false,
                data: [{ name: "foo" }, { name: "bar" }]
            });
        }, 2000);
    }
    render() {
        const { loading, data } = this.state;
        return loading === true
        ? <div>Loading...</div>
        : <div>
            {!data.length
                ? <div>No data found.</div>
                : data.map(item => <div>{item.name}</div>)
            } 
        </div>
    }
}

CodeSandbox 演示：https://codesandbox.io/s/jzv12lx2v9

【讨论】：

【解决方案2】：

如果您只需要在没有找到记录的情况下显示一条消息，您可以直接检查您所在州的数据属性。

{ data.length===0 && <p>No data to show.</p>}

但是，您可能希望在设置状态之前检查 http 响应是否确实有效。

【讨论】：

你可以让它更短：{ !data.length && <p>No data to show.</p>}
@vicodin 实际上，我希望如果用户正在搜索某些内容，如果数据不可用，我想显示消息。它工作，但它只是为分页工作