反应功能数组延迟更新

如何解决反应功能数组延迟更新

大家好，我遇到了这个问题，我成功地使用他们的城市按字母顺序对对象的数组状态进行了排序，但问题是只有在我在 UI 上搜索某些内容后才会更新可视化的数组。

我试着查了一下，但仍然丢失了正在发生的事情的视频 https://drive.google.com/file/d/17pAwTeo8IZ6mw3dd2pxDxbfY-ToL7cjG/view?usp=sharing

这是代码

完整代码在这里

import React,{ useState,useEffect } from "react";
import "./body.css";
import Axios from "axios";
import { Button } from "@material-ui/core";

function SearchBar() {
  const [filteredData,setFilteredData] = useState([]);
  const [search,setSearch] = useState("");

  async function getUsers() {
    Axios.get("https://jsonplaceholder.typicode.com/users")
      .then((response) => {
        setFilteredData(response.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }
  useEffect(() => {
    getUsers();
  },[]);

  function handleReset() {
    getUsers();

    setSearch("");
    handleClear();
  }

  const handleClear = () => {
    Array.from(document.querySelectorAll("input")).forEach(
      (input) => (input.value = "")
    );
  };

  const delItem = (id) => {
    setFilteredData(filteredData.filter((e) => e.name.localeCompare(id) !== 0));
  };

  const sort = () => {
    setFilteredData(
      filteredData.sort((a,b) => {
        return a.address.city.localeCompare(b.address.city);
      })
    );
    // console.log(sorted);
    // setFilteredData(sorted);
    console.log(filteredData);
  };

  return (
    <div>
      <form class="search-bar">
        <input
          type="input"
          name="search"
          pattern=".*\S.*"
          // requiredw
          autoComplete="off"
          placeholder="Input Text Here"
          onChange={(e) => setSearch(e.target.value)}
        ></input>
      </form>

      <Button onClick={handleReset}>Reset</Button>
      <Button onClick={sort}>Sort</Button>

      <div>
        <ul>
          {filteredData
            .filter((user) => {
              var dynamicSearch = search;

              if (
                user.name.toLowerCase().includes(dynamicSearch.toLowerCase()) ||
                user.email
                  .toLowerCase()
                  .includes(dynamicSearch.toLowerCase()) ||
                user.phone
                  .toLowerCase()
                  .includes(dynamicSearch.toLowerCase()) ||
                user.address.city
                  .toLowerCase()
                  .includes(dynamicSearch.toLowerCase())
              ) {
                return true;
              }
            })
            .map((val,index) => (
              <li className="li" key={val.id}>
                <p className="list">
                  {"Name: "}
                  {val.name} <br />
                  {"Email: "}
                  {val.email}
                  <br />
                  {"Phone: "}
                  {val.phone}
                  <br />
                  {"City: "}
                  {val.address.city}
                </p>
                <button className="delButton" onClick={() => delItem(val.name)}>
                  x
                </button>
              </li>
            ))}
        </ul>
      </div>
    </div>
  );
}

export default SearchBar;

解决方法

试试这个：

  const sort = () => {
    const sortedData = filteredData.sort((a,b) => {
    return a.address.city.localeCompare(b.address.city);
    });
    setFilteredData([...sortedData]);
  };

问题是一旦您在 setFilteredData 函数中更新排序数据，它就无法观察到需要呈现的更改。所以在更新值时一定要复制状态变量。