当我没有看到 api 结果时，我需要显示未找到数据答案

【问题标题】：when I dont see api results I need to show no data found当我没有看到 api 结果时，我需要显示未找到数据
【发布时间】：2020-02-06 05:19:54
【问题描述】：

当我输入 1sport1 时，我看到了结果。
当我输入 1sport12 时，我没有看到任何结果。
所以我需要显示没有找到数据的类型。
在清除所有内容时，它应该清除文本框。
但问题是这一行console.log("resp.json()--->", resp.json().[[PromiseValue]]);
我想当长度为 0 时，我会显示找不到数据。
但我收到此错误。/src/searchbar.js: Unexpected token (31:48)
我正在评论以下行，以便您可以在浏览器中看到输出 // console.log("resp.json()--->", resp.json().[[PromiseValue]]); // display: this.state.noData ? "" : "none"
您能告诉我在没有来自 api 的数据时如何显示未找到数据吗？
在下面提供我的代码 sn-p 和沙箱。

https://codesandbox.io/s/jovial-cdn-14o1w

getQuery = async (type = "", search_tag = "") => {
    var url = "https://hn.algolia.com/api/v1/search?tags=";
    const resp = await fetch(`${url}${type}&query=${search_tag}`);
    // console.log("resp.json()--->", resp.json().[[PromiseValue]]);
    return resp.json();
  };

  render() {
    console.log("this.state.noData--->", this.state.noData);
    return (
      <div>
        <input type="text" onChange={this.searchByKeyword} />
        <p
          style={
            {
              // display: this.state.noData ? "" : "none"
            }
          }
        >
          No data found
          <p>clear all</p>
        </p>
        {/* <Scroll />  */}
      </div>
    );

【问题讨论】：

标签： javascript html css reactjs redux

【解决方案1】：

您可以在JSX 上使用条件渲染来实现此目的。

将您的代码更改为以下代码，它将起作用。

        <SearchBar onFetch={this.onFetch} />
        {this.state.data && this.state.data.length > 0 ? 
        this.state.data.map((item) => <div key={item.objectID}>{item.title}</div>) :
        <p>no data</p>}

我fork了沙盒，是here

【讨论】：