反应：如果没有记录，如何显示消息

Question

我在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' ))

Answer 1

我认为一个很好的方法是，当没有记录显示时，让后端返回一条错误消息。您可以使用。在您的axios之后捕捉。get（）。然后（）函数查看后端是否返回任何错误，然后将其显示给用户。

看：对于一个有效的请求而不是一个空数据，正确的REST响应代码是什么？

Answer 2

可以在渲染组件之前检查数据，如果没有任何组件，则返回另一个组件。使用类似于此示例“”的表达式{doIHaveData？

其中Component1具有您的功能，Component2返回消息或spinner加载程序，无论您想要什么。

我希望有帮助！

检查空数组时，可以检查数组类型和长度。我个人会这样做

 {Array.isArray(array) && array.length === 0 ? <component1/> : <component2/>} 

Answer 3

您可以在返回数据时进行检查，如果没有数据，则设置错误：

  getData(){
    const {Item,skip}=this.state;
    axios.get(`http://localhost:8001/parties?filter[limit]=${Item}&&filter[skip]=${skip}`)
    .then(response=>{
      console.log(response.data);
      if (!response.data.length) {
        this.setState({noData: true}) 
      } else {
        this.setState({
          data:response.data, noData: false
        })
      }
    })
  }

然后在渲染函数中：

render() {
  if (this.state.noData) {
    return <p>No Data was returned!</p>;
  }
  ...