为了账号安全,请及时绑定邮箱和手机立即绑定

如何重新渲染 .map() 列表

如何重新渲染 .map() 列表

芜湖不芜 2023-08-24 15:59:40
当我单击将数组的第一个元素发送到最后一个位置的按钮时,我尝试重新渲染列表,但是,当我单击该按钮时,组件不会重新渲染,即使 console.log 显示该数组已更改: codesandboximport 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;
查看完整描述

4 回答

?
慕侠2389804

TA贡献1719条经验 获得超6个赞

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


  onClick={() => {

    const list = [...exerciseList]

    list.push(list.shift());

    setExerciseList(list);

  }}


查看完整回答
反对 回复 2023-08-24
?
动漫人物

TA贡献1815条经验 获得超10个赞

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


const newList = [...exerciseList]

newList.push(newList.shift())

setExerciseList(newList)


查看完整回答
反对 回复 2023-08-24
?
慕丝7291255

TA贡献1859条经验 获得超6个赞

这是因为 state 中的数组引用没有改变。像这样更新 setState 调用,


          <button

            onClick={() => {

              exerciseList.push(exerciseList.shift());

              setExerciseList([...exerciseList]);

              console.log(exerciseList);

            }}

          >

            Done

          </button>


查看完整回答
反对 回复 2023-08-24
?
慕勒3428872

TA贡献1848条经验 获得超6个赞

您必须更改数组引用以反映状态中的情况。

setExerciseList([...exerciseList]);

工作代码 - https://codesandbox.io/s/react-playground-forked-ohl1u


查看完整回答
反对 回复 2023-08-24
  • 4 回答
  • 0 关注
  • 158 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信