javascript - 当我看不到 api 结果时，我需要显示未找到数据

Question

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

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

Answer 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