第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

蕪湖不蕪 2023-08-24 15:59:40
當我單擊將數(shù)組的第一個元素發(fā)送到最后一個位置的按鈕時,我嘗試重新渲染列表,但是,當我單擊該按鈕時,組件不會重新渲染,即使 console.log 顯示該數(shù)組已更改: 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條經(jīng)驗 獲得超6個贊

此問題是因為數(shù)組引用未更改。


  onClick={() => {

    const list = [...exerciseList]

    list.push(list.shift());

    setExerciseList(list);

  }}


查看完整回答
反對 回復 2023-08-24
?
動漫人物

TA貢獻1815條經(jīng)驗 獲得超10個贊

這是因為您正在exerciseList直接修改數(shù)組,但您不應該這樣做,因為狀態(tài)更新將看到列表是相同的并且不會觸發(fā)重新渲染。相反,制作數(shù)組的副本,然后使用setExerciseList:


const newList = [...exerciseList]

newList.push(newList.shift())

setExerciseList(newList)


查看完整回答
反對 回復 2023-08-24
?
慕絲7291255

TA貢獻1859條經(jīng)驗 獲得超6個贊

這是因為 state 中的數(shù)組引用沒有改變。像這樣更新 setState 調(diào)用,


          <button

            onClick={() => {

              exerciseList.push(exerciseList.shift());

              setExerciseList([...exerciseList]);

              console.log(exerciseList);

            }}

          >

            Done

          </button>


查看完整回答
反對 回復 2023-08-24
?
慕勒3428872

TA貢獻1848條經(jīng)驗 獲得超6個贊

您必須更改數(shù)組引用以反映狀態(tài)中的情況。

setExerciseList([...exerciseList]);

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


查看完整回答
反對 回復 2023-08-24
  • 4 回答
  • 0 關注
  • 305 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號