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

Posted 2023-02-19

【中文标题】React：如果没有记录，如何显示消息

【英文标题】：React : How to Show Message if there is no records

【发布时间】：2019-08-05 19:57:24

【问题描述】：

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

【参考方案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>;
  
  ...

【讨论】：

实际上，它不起作用。我希望如果数组中没有数据我想显示消息。

如果数组中没有数据，我想在搜索过滤器上设置错误

在 render() 中确定，只需检查 this.state.filteredData 是否有任何结果。如果没有，请在渲染输出中添加一条错误消息。

试过但还是不行！你能编辑你的答案并写下确切的代码吗？谢谢

Jon - 我认为您需要花时间尝试了解您正在使用的技术。如果别人每次都写解决方案，你会学到什么？

【参考方案2】：

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

Component1 有你的功能，而 Component2 会返回一条消息或你想要的微调器加载器。

希望对你有帮助！

当您检查空数组时，您可以检查数组类型和长度。我个人会做类似的事情

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

【参考方案3】：

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

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

【参考方案4】：

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

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

或者，如果您尝试添加一条根本没有结果的消息，那么：

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

【参考方案5】：

你可以使用条件渲染！

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