React：如果在 obj 中找不到数据，如何显示错误消息答案

【问题标题】：React : How to show Error Message if no data is found in objReact：如果在 obj 中找不到数据，如何显示错误消息
【发布时间】：2019-08-06 23:43:55
【问题描述】：

我正在做 react 项目，我是 ReactJS 的初学者。实际上我已经实现了搜索过滤器的逻辑。在搜索是否找不到目标数据时，我想显示 Error Message 。我还将提供代码供参考，但我想告诉一些逻辑点。我已将数组创建为renderData，我正在使用过滤器结果对其进行更新。如果用户正在键入并且在数组中找不到查询相关数据，我想制定一个逻辑，那么我想显示一个错误。有人请帮我解决这个问题。谢谢

代码

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

【问题讨论】：

标签： javascript reactjs ecmascript-6

【解决方案1】：

在您想要的任何地方保留有关您的州或班级的过滤数据。例如；

 constructor(props){
    super(props);
    this.state={
      includes: false,
    }
  }

     componentDidMount(){
           this.filtered = [];
       }

     searchHandler(event){
        if(event.target.value.toLowerCase().includes(YOUR_STRING_TO_CHECK.toLowerCase())
           { 
             this.filtered.push(event.target.value);
             this.setState({includes:true});
           }
        });
      }

   render()
     { 
        if(!this.state.includes)
        return(
        <div> ERROR</div> 
        )
        else
        return(<div> NOT ERROR </div>)
     }

试试这些。同样的逻辑。如果您想保留过滤后的数据，请将其保存在课堂上的某个地方。

【讨论】：

【解决方案2】：

一个不错的选择是：

在getData() 方法中，如果数组为空，您可以在状态中设置错误。您可以使用 underscore.js、lodash 或

来检查数组是否为空

if (array === undefined || array.length == 0) {
    // array empty or does not exist
}

示例：https://codepen.io/anon/pen/qvoGZp

【讨论】：

在 getData() 中检查是否为 _.isEmpty(response.data)。如果为真，则设置错误状态。在您的 render() 方法中检查状态是否有任何错误，如果是，则返回错误页面。
其实我想在搜索框中检查条件，如果目标值与过滤值不同。然后生成消息。你能帮帮我吗？
哦，我明白了。在我看来，这样做的一个好方法是制作一个接收您的数组以呈现您的表格的愚蠢组件。如果数组为空，则呈现错误。如果它有项目，则呈现项目，如果过滤后的数组有内容，则显示过滤后的内容。（将内容作为道具传递）