Блог

Привет всем, у меня есть проблема, когда я успешно сортирую состояние массива объекта в алфавитном порядке по их городам, но проблема в том, что визуализируемый массив обновляется только после того, как я что-то ищу в пользовательском интерфейсе.

Я попытался найти его, но все равно потерял вот видео того, что происходит 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, она не может отслеживать изменения, которые необходимо отобразить. Поэтому всегда делайте копию переменных состояния, когда вы обновляете значения.