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

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

您可以检查何时获得数据并在没有数据时设置错误：

  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>;
  }
  ...

Answer 2

我认为一个很好的方法是在没有要显示的记录时让你的后端返回错误信息。您可以在.catch函数后使用axios.get().then()查看后端是否返回任何错误，然后将其显示给用户。

看：What is the proper REST response code for a valid request but an empty data?

Answer 3

您可以根据需要将消息添加为另一个条件：

{this.state.filtered.length === 0 && (
  <div>Your Message</div>
)}

或者，如果您尝试添加消息以完全没有结果，那么：

{this.state.allData.length === 0 && (
  <div>Your Message</div>
)}

Answer 4

你可以使用条件渲染！

render(){
const filteredItems = this.getDataItems(this.state.filtered);
const dataItems = this.getDataItems(this.state.data);

if(dataItems){
return(
 <div>Your Message</div>
)
}
else{
//Your normal code

}
}

Answer 5

您可以在渲染组件之前检查数据，如果没有，则返回另一个组件。使用表达式这样的例子'''{doIHaveData？ <Component1 />：<Component2 />}'''

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

我希望它有所帮助！

当您检查空数组时，您可以检查数组类型和长度。我会亲自做点什么

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