反应功能数组延迟更新答案

【问题标题】：React functional array delay to update反应功能数组延迟更新
【发布时间】：2021-07-04 01:06:52
【问题描述】：

大家好，我有这个问题，我成功地使用他们的城市按字母顺序对对象的数组状态进行排序，但问题是，只有在我在 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;

【问题讨论】：

将filteredData, setFilteredData 添加到你的useEffect Array [filteredData, setFilteredData]
试过了，但没有用，现在在我点击排序并搜索某些内容后，地图甚至没有更新，但我可以在控制台日志中看到数组正确更新。不过谢谢
我认为您需要在 useEffect 挂钩和 handleReset() 函数中等待 getUsers()。
不幸的是它没有工作:(

标签： reactjs react-state react-map-gl

【解决方案1】：

试试这个：

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

问题是一旦您在 setFilteredData 函数中更新排序数据，它就无法观察需要呈现的更改。因此，当您更新值时，请务必复制状态变量。

【讨论】：