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

我认为一种不错的方法是让您的后端在没有要显示的记录时返回一条错误消息。您可以在then函数之后使用else来查看后端是否返回任何错误，然后将其显示给用户。

外观：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返回一条消息或任何您想要的微调加载器。

希望对您有所帮助！

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

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

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

5 个答案: