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

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

React 的 useState 問題,太多的重新渲染

React 的 useState 問題,太多的重新渲染

回首憶惘然 2023-06-09 10:59:16
我正在將 fullcalendar 庫用于一個(gè)小的&ldquo;待辦事項(xiàng)&rdquo;筆記項(xiàng)目,只是為了學(xué)習(xí) React js(我是新手)。當(dāng)我從 firebase 上的實(shí)時(shí)數(shù)據(jù)庫中獲取數(shù)據(jù)時(shí),我嘗試在日歷中顯示事件名稱 (evento) 和日期 (fecha),但是當(dāng)我使用 setName() 來放置數(shù)據(jù)并將其保存到數(shù)組中時(shí)name=[],然后通過我重新渲染這樣的錯(cuò)誤,我不知道如何修復(fù)它....如果有人能幫助我,那就太好了?。▽?duì)不起我的英語不好)謝謝這是錯(cuò)誤和代碼:? ? const [date, SetFecha] = useContext(Contexto)? ? const [name, setName] = useState([])? ? firebase.database().ref().on('value', (snapshot) => {? ? ? ? let obj = snapshot.val()? ? ? ? Object.values(obj.Notas).forEach(e => {? ? ? ? ? ? setName([...name, { title: e.evento, date: e.fecha }])? ? ? ? });? ? })? ? const DateClick = (arg) => {? ? ? ? SetFecha(arg.dateStr)? ??? ? }? ? return (? ? ? ? <FullCalendar? ? ? ? ? ? plugins={[dayGridPlugin, listPlugin, interactionPlugin]}? ? ? ? ? ? initialView="dayGridMonth"? ? ? ? ? ? dateClick={DateClick}? ? ? ? ? ? events={name}?? ? ? ? />? ? )解決方案?useEffect(() => {? ? ? ? firebase.database().ref().on('value', (snapshot) => {? ? ? ? ? ? let obj = snapshot.val()? ? ? ? ? ? let arr = []? ? ? ? ? ? Object.values(obj.Notas).forEach(e => {? ? ? ? ? ? ? ? arr.push({ title: e.evento, date: e.fecha })? ? ? ? ? ? });? ? ? ? ? ? setName(arr)? ? ? ? })? ? }, []);
查看完整描述

2 回答

?
慕田峪4524236

TA貢獻(xiàn)1875條經(jīng)驗(yàn) 獲得超5個(gè)贊

你想使用useEffect鉤子。嘗試類似的東西:


? useEffect(() => {

? ? firebase.database().ref().on('value', (snapshot) => {

? ? ? const obj = snapshot.val();

? ? ? const arrData = [];

? ? ? Object.values(obj.Notas).forEach(e =>?

? ? ? ? arrData.push({ title: e.evento, date: e.fecha }));

? ? ? setName(arrData);

? ? });

? }, firebase.database().ref().on('value'));

您在上面的代碼中顯示的問題是每次調(diào)用時(shí)setName()都會(huì)重新渲染組件(這是 React 返回的一個(gè)特殊函數(shù),用于更改組件狀態(tài)并重新渲染)。當(dāng)它重新渲染時(shí),setName()再次調(diào)用,從而導(dǎo)致重新渲染中的無限循環(huán)。


useEffect()不會(huì)在重新渲染時(shí)運(yùn)行,而是僅在檢測到數(shù)據(jù)已更改時(shí)運(yùn)行。在這種情況下,它會(huì)檢查是否firebase.database().ref().on('value')已更改,如果是,則運(yùn)行代碼useEffect()并重新渲染。


順便說一句,可以應(yīng)用一個(gè)小的優(yōu)化是使用局部變量來存儲(chǔ)過程中的值。然后setName()只調(diào)用一次。因?yàn)槿缜八?,每次調(diào)用這個(gè)特殊函數(shù),都可能導(dǎo)致重新渲染。所以你只想在完成所有中間過程后調(diào)用它一次。或者更好的是,以函數(shù)式風(fēng)格進(jìn)行:


? useEffect(() => {

? ? firebase.database().ref().on('value', (snapshot) => {

? ? ? setName(Object.values(snapshot.val().Notas).map(e =>?

? ? ? ? { title: e.evento, date: e.fecha }));

? ? });

? }, firebase.database().ref().on('value'));


查看完整回答
反對(duì) 回復(fù) 2023-06-09
?
拉風(fēng)的咖菲貓

TA貢獻(xiàn)1995條經(jīng)驗(yàn) 獲得超2個(gè)贊

你有兩個(gè)問題:

  1. firebase 在反應(yīng)組件中創(chuàng)建監(jiān)聽器。

  2. 在里面調(diào)用 setName Array.prototype.forEach;

我會(huì)告訴你循環(huán)在哪里。

  1. 組件被渲染;

  2. 組件創(chuàng)建狀態(tài)[name, setName];

  3. 組件調(diào)用firebase.database().ref().on('value', callback);

  4. Callback從firebase獲取數(shù)據(jù),通過forEach按鍵進(jìn)行迭代;

  5. 在您調(diào)用 forEach 的第一次迭代中setName;

  6. setName調(diào)用重新渲染;

  7. 走到3臺(tái)階;

解決方案:

function OwnComponent(props) {

  const [date, setFecha] = useContext(Contexto);

  const [name, setName] = useState([]);

    

  const dateClick = React.useCallback((arg) => {

    setFecha(arg.dateStr);

  }, [setFecha]);

    

  React.useEffect(() => {

    const unsubscribe = firebase.database().ref(/* you can pass 'Notas' 

 here */).on('value', (snapshot) => {

      setName(Object.values(snapshot.val().Notas/* you can remove .Notas here */).map(

        ({ evento: title, fecha: date }) => ({ title, date })

      ));

    });


    return () => {

      unsubscribe();

    };

  }, []);

    

  return (

    <FullCalendar

      plugins={[dayGridPlugin, listPlugin, interactionPlugin]}

      initialView="dayGridMonth"

      dateClick={dateClick}

      events={name} 

    />

  );

}


查看完整回答
反對(duì) 回復(fù) 2023-06-09
  • 2 回答
  • 0 關(guān)注
  • 281 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)