数组长度不变

Question

我有一个问题。我正在尝试从 API 进行数据搜索。 问题是{people.length === 0 && <p>No data</p>} 不工作。当我console.log people.length 输入时长度值不会改变。问题出在哪里？

这是我的代码：

const PeopleSearch = () => {
  const [people, setPeople] = useState([]);
  const [search, setSearch] = useState('');
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    const fetchData = async () => {
      const response = await axios.get(swapi);
      const transformedPeople = response.data.results.sort((a, b) =>
        a.name.localeCompare(b.name)
      );
      setPeople(transformedPeople);
      setLoading(false);
    };

    fetchData();
  }, []);

  const searchHandler = (event) => {
    setSearch(event.target.value);
  };

  return (
    <>
      <Input
        type="text"
        placeholder="Search by name..."
        onChange={searchHandler}
      />
      <section>
        {loading ? (
          <Loading />
        ) : (
          <PeopleList
            people={people.filter(({ name }) => {
              if (name.toLowerCase().includes(search.toLowerCase())) {
                return people;
              }
            })}
          />
        )}
        {people.length === 0 && <p>No data</p>}
      </section>
    </>
  );
};

Answer 1

您只在挂载时使用useEffect(() => { ... }, []) 调用一次setPeople - 因此，一旦API 调用完成，people.length 将保持不变。您需要对 PeopleList 属性和 No data 检查使用过滤后的数组。

你还应该调整你的filter，因为它只关心它的返回值是否真实。

const filteredPeople = people.filter(({ name }) => name.toLowerCase().includes(search.toLowerCase()));
return (
    <>
      <Input
        type="text"
        placeholder="Search by name..."
        onChange={searchHandler}
      />
      <section>
        {loading ? (
          <Loading />
        ) : (
          <PeopleList
            people={filteredPeople}
          />
        )}
        {filteredPeople.length === 0 && !loading && <p>No data</p>}
      </section>
    </>
  );