Состояние не обновляется в React после сортировки?

#reactjs #react-router

#reactjs #react-маршрутизатор

Вопрос:

Я пытаюсь отсортировать объект JSON по дате и номеру. Все работает нормально, когда я регистрирую консоль, но состояние не обновляется на стороне графического интерфейса. Чего мне не хватает? Я использую функциональные компоненты. Вот код…

 const Posts = () => {
  const [dummyData, setDummyData] = useState(Data);
  const sortList = (e) => {
    if (e.target.value === "date") {
      handleSort();
    } else if (e.target.value === "upvotes") {
      byUpvotes();
    }
  };
  const handleSort = () => {
    const sortedData = dummyData.sort((a, b) => {
      const c = new Date(a.published);
      const d = new Date(b.published);
      if (c.getDate() > d.getDate()) {
        return c;
      } else {
        return d;
      }
    });
    setDummyData(sortedData);
    console.log(sortedData);
  };

  const byUpvotes = () => {
    const sortByName = dummyData.sort((a, b) => {
      return b.upvotes - a.upvotes;
    });
    setDummyData(sortByName);
    console.log(sortByName);
  };
  return (
    <div>
      {dummyData.map((post) => (
        <PostsItem key={post.id} post={post} />
      ))}

      <div className="row">
        <div className="col-s6">
          <label>Browser Select</label>
          <select className="browser-default" onChange={sortList}>
            <option disabled selected>
              Choose your option
            </option>
            <option value="date">Date</option>
            <option value="upvotes">Upvotes</option>
          </select>
        </div>
      </div>
    </div>
  );
};

Ответ №1:

Функция сортировки не создает новый массив, она изменяет старый. Итак, вы изменяете существующее состояние, а затем устанавливаете состояние с тем же массивом. Поскольку это тот же массив, react считает, что состояние не изменилось, и пропускает рендеринг.

Вместо этого вам нужно будет создать копию массива, а затем отсортировать его. Например:

 const byUpvotes = () => {
  const sortByName = [...dummyData];
  sortByName.sort((a, b) => {
    return b.upvotes - a.upvotes
  })
  setDummyData(sortByName)
}

1. спасибо, что сейчас это работает, но метод handlesort(), который является сортировкой по дате, не сортирует и не обновляет состояние, хотя я сначала добавил его в пустой массив, по-прежнему неправильно сортирует и отображает в состоянии?

2. Ваша функция сортировки должна возвращать число. Положительное число указывает, что оно помещается b раньше в массив; отрицательное число помещается a раньше в массив. В настоящее время вы возвращаете объекты даты ( c и d )

3. Я вернул 1 и -1, но они все еще не сортируются. По крайней мере, оно должно обновить мое состояние, но пока мне не повезло, я экспортировал другие ответы, и они сортируются тем же методом, что и я. . if (c.getDate() > d.getDate()) { return 1; } else { return -1; }

4. Было бы полезно, если бы вы показали, как выглядит код сейчас с этими изменениями. Вы можете отредактировать свой исходный вопрос (не удаляйте старый код, но вы можете добавить дополнительную информацию внизу)

5. Неважно, я решил проблему. Большое вам спасибо 🙂