如何显示搜索结果未找到消息

Question

import React, { useState, useEffect } from 'react'
import axios from 'axios'

function DataApi({ searchTerm }) {
  const [users, setUsers] = useState([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState()

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then(res => {
        setUsers(res.data);
        console.log(res.data);
        setLoading(true);
      })
      .catch(error => {
        console.log(error);
        setError('Error retrieving data');
      });
  }, []);
  return (
    <div>
      <div>
        {
          !loading ?
          <h1>...Loading</h1>
          :
          users.length > 0 && users.filter((item) => 
            (searchTerm === '') ?  item :
            (item.title.toLowerCase().includes(searchTerm.toLocaleLowerCase())) ? item :
            // <h1>search result not found</h1>
            null
          ).map((item) => {
          return (
          <ul key={item.id}>
            <li>Name: {item.id}</li>
            <li>Title: {item.title}</li>
            <li>Body: {item.body}</li>
          </ul>
            )}
            )
          }
          {
            error ? <h1>{error}</h1> : null
          }
      </div>
    </div>
  )
}

export default DataApi;

我制作了一个搜索字段，用户可以在其中搜索此人的姓名。如果用户没有得到搜索到的名字，那么应该有一条消息 search result not found。我尝试使用 if-else（三元运算符）实现它并将消息放入 else 部分，但它不起作用。当我把 null 而不是 search result not found 时，它工作得很好，但我无法显示消息。但是如果我把 search result not found 而不是 null 那么什么都不起作用，甚至没有过滤功能。你们能帮帮我吗？提前谢谢你。

Answer 1

您可以简单地检查用户的长度并将过滤器方法移动到 useEffect 并显示一条消息

import React, { useState, useEffect } from "react";
import axios from "axios";

function DataApi({ searchTerm }) {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState();
  const [searchTermTest, setsearchTermTest] = useState();

  function handleChange(event) {
    setsearchTermTest(event.target.value);
  }
  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then((res) => {
        const data = res.data;
        const filteredData = data.filter((dat) =>
          dat.title.includes(searchTermTest === undefined ? "" : searchTermTest)
        );
        setUsers(filteredData);
        setLoading(true);
      })
      .catch((error) => {
        console.log("errr", error);
        setError("Error retrieving data");
      });
  }, [searchTermTest]);

  return (
    <div>
      <input type="text" onChange={handleChange} />
      <div>
        {!loading ? (
          <h1>...Loading</h1>
        ) : (
          users.length > 0 &&
          users.map((item) => {
            return (
              <ul key={item.id}>
                <li>Name: {item.id}</li>
                <li>Title: {item.title}</li>
                <li>Body: {item.body}</li>
              </ul>
            );
          })
        )}
        {users.length === 0 && loading ? <h1>search result not found</h1> : ""}
        {error ? <h1>{error}</h1> : null}
      </div>
    </div>
  );
}

export default DataApi;

        {users.length === 0 && loading ? <h1>search result not found</h1> : ""}

我在codesandbox里做了

Codesandbox link 这里

Answer 2

在Array.filter()方法中你需要returntrue/false值，就是这样works.

修改了代码并添加了 renderUser 函数来处理用户数据过滤器。

DataApi function

function DataApi({ searchTerm }) {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState();
  const [searchTermTest, setsearchTermTest] = useState();

  function handleChange(event) {
    setsearchTermTest(event.target.value);
  }
  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then((res) => {
        const data = res.data;
        const filteredData = data.filter((dat) =>
          dat.title.includes(searchTermTest === undefined ? "" : searchTermTest)
        );
        setUsers(filteredData);
        setLoading(true);
      })
      .catch((error) => {
        console.log("errr", error);
        setError("Error retrieving data");
      });
  }, [searchTermTest]);

  return (
    <div>
      <input type="text" onChange={handleChange} />
      <div>
        {!loading ? (
          <h1>...Loading</h1>
        ) : (
          users.length > 0 && renderUsers(users, searchTerm) // updated here...
        )}
        {error ? <h1>{error}</h1> : null}
      </div>
    </div>
  );
}

renderUsers function

const renderUsers = (users, searchTerm) => {
  const filteredUsers = users.filter((item) => {
    console.log(item.title);
    return searchTerm === ""
      ? true
      : item.title.toLowerCase().includes(searchTerm.toLocaleLowerCase())
      ? true
      : false;
  });
  return filteredUsers.length > 0 ? (
    filteredUsers.map((item) => {
      return (
        <ul key={item.id}>
          <li>Name: {item.id}</li>
          <li>Title: {item.title}</li>
          <li>Body: {item.body}</li>
        </ul>
      );
    })
  ) : (
    <h1>search result not found</h1>
  );
};

export default DataApi;

如何显示搜索结果未找到消息

How to show search result not found message

javascript

reactjs

conditional-operator

conditional-rendering