useState不更新状态

Question

我正在尝试通过函数searchByName中的输入搜索来过滤用户。 我设法在copyUsers变量中获得了正确的结果，但不幸的是，它并没有反映出状态内部的变化。

忘记使用带有钩子和打字稿的裸React-App。

例如，我在输入中写入'p'并在copyUsers变量中接收了正确的过滤后的数组，但是随后我将其推入了不会更新的状态。

附加屏幕截图以更好地了解情况：

我尝试改用setFilteredUsers（copyUsers）：

• setFilteredUsers（（）=> [... filteredUsers，copyUsers]）;

• setFilteredUsers（（）=> copyUsers）;

主要组成部分：

  const { value } = useSelector(({ test }: any) => test);

  const [users, setUsers] = useState<Users>([]);

  const [filteredUsers, setFilteredUsers] = useState<Users>([]);

  const [searchNameValue, setSearchNameValue] = useState<string>("");

  const [selectedUser, setSelectedUser] = useState<User>();

  const [searchOrderBy, setSearchOrderBy] = useState<string>("");

  const dispatch = useDispatch();

  useEffect(() => {
    const get = async () => {
      const response = await ApiTest.testGet();
      setUsers(response);
      setSearchOrderBy("desc");
    };
    get();
  }, []);

  useEffect(() => {
    searchByName();
    setNewOrder();
  }, [searchOrderBy]);

  useEffect(() => {
    console.log('search value changed!', searchNameValue);
      searchByName();
      setNewOrder()
  }, [searchNameValue]);

  const setNewOrder = () => {
    if (users.length) {
      let copyUsers = JSON.parse(
        JSON.stringify(filteredUsers.length ? filteredUsers : users)
      );
      switch (searchOrderBy) {
        case "desc":
          copyUsers.sort((a: any, b: any) => {
            if (a.id > b.id) {
              return -1;
            }
            if (b.id > a.id) {
              return 1;
            }
            return 0;
          });
          break;

        case "asc":
          copyUsers.sort((a: any, b: any) => {
            if (b.id > a.id) {
              return -1;
            }
            if (a.id > b.id) {
              return 1;
            }
            return 0;
          });
          break;

        default:
          break;
      }
      filteredUsers.length ? setFilteredUsers(copyUsers) : setUsers(copyUsers);
    }
  };

  const searchByName = () => {
    if (searchNameValue) {
      let copyUsers = JSON.parse(JSON.stringify(users));
      copyUsers = copyUsers.filter((user: User) => {
        return user.name
          .toLocaleLowerCase()
          .includes(searchNameValue.toLocaleLowerCase());
      });
      console.log("copyUsers =", copyUsers);
      setFilteredUsers(copyUsers);
      console.log("filteredUsers =", filteredUsers);
    }
  };

  const UserCards =
    !!users.length &&
    (searchNameValue ? filteredUsers : users).map(user => {
      return (
        <UserCard
          selectedUser={selectedUser}
          setSelectedUser={(user: User) => setSelectedUser(user)}
          user={user}
        />
      );
    });

  return (
    <div>
      <FilterBar
        searchOrderBy={searchOrderBy}
        searchSetOrderBy={(value: string) => setSearchOrderBy(value)}
        setSearchNameValue={(value: string) => setSearchNameValue(value)}
        searchNameValue={searchNameValue}
      />
      <div style={{ display: "flex", flexFlow: "wrap" }}>{UserCards}</div>
    </div>
  );