如何重新呈现.map()列表

Question

当我单击一个将数组的第一个元素发送到最后一个位置的按钮时，我正在尝试重新呈现一个列表，但是，当我单击该按钮时，组件不会重新呈现，即使console.log显示数组已经更改：codesandbox

import React, { useState } from "react";

const DailySchedule = () => {
  const [exerciseList, setExerciseList] = useState([
    "exercise 1",
    "exercise 2",
    "exercise 3"
  ]);

  return (
    <div>
      <section>
        <h2>Warm-up</h2>

        <ul>
          {exerciseList.map((exrcs, idx) => {
            return (
              <li>
                {exrcs}{" "}
                {idx === 0 && (
                  <button
                    onClick={() => {
                      exerciseList.push(exerciseList.shift());
                      setExerciseList(exerciseList);
                      console.log(exerciseList);
                    }}
                  >
                    Done
                  </button>
                )}
              </li>
            );
          })}
        </ul>
      </section>
    </div>
  );
};

export default DailySchedule;

Answer 1

这是因为状态中的数组引用没有更改。像这样更新setState调用，

          <button
            onClick={() => {
              exerciseList.push(exerciseList.shift());
              setExerciseList([...exerciseList]);
              console.log(exerciseList);
            }}
          >
            Done
          </button>

Answer 2

这是因为您正在直接修改exerciseList数组，而您不应该这样做，因为状态更新将看到列表是相同的，并且不会触发重新呈现。而是制作阵列的副本，然后使用setExerciseList

const newList = [...exerciseList]
newList.push(newList.shift())
setExerciseList(newList)

Answer 3

此问题是因为数组引用未更改。

  onClick={() => {
    const list = [...exerciseList]
    list.push(list.shift());
    setExerciseList(list);
  }}