ReactJS 在 useMemo 函数中给出错误的设置状态错误

Question

我有这个用于搜索数据的useMemo

import React, { useMemo, useState } from "react";

import "./SearchCharacters.css";

function SearchCharacters({ charactersInfo, setSearchResult }) {
  const [searchText, setSearchText] = useState("");
  useMemo(() => {
    const findCharacter = charactersInfo.filter((character) => {
      return (
        character.gender.toLowerCase() === searchText.toLowerCase() ||
        character.species.toLowerCase() === searchText.toLowerCase() ||
        character.status.toLowerCase() === searchText.toLowerCase()
      );
    });

    findCharacter.length > 0
      ? setSearchResult(findCharacter)
      : setSearchResult(null);
  }, [searchText]);
  return (
    <div className="search_container">
      <input
        className="search_input"
        onChange={(e) => setSearchText(e.target.value)}
        placeholder="Enter characters full name"
      />
    </div>
  );
}

export default SearchCharacters;

charactersInfo - 是一个包含字符信息的对象数组setSearchResult - 是我从父组件传递的 setState

Warning: Cannot update a component (`Characters`) while rendering a different component (`SearchCharacters`). To locate the bad setState() call inside `SearchCharacters`, follow the stack trace

有什么建议吗？

Answer 1

您不应该在 useMemo 中执行任何 setState。它应该是幂等操作，并且不应包含任何副作用。当您需要计算一些繁重的东西并且想要记住结果时，您通常希望使用 useMemo，但这里似乎并非如此。

将 useMemo 替换为 useEffect。另外，在依赖数组中提供 charactersInfo 时要小心。