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

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

無法將 React 組件推送到數(shù)組中

無法將 React 組件推送到數(shù)組中

烙印99 2022-10-13 10:43:28
我在使用 React 將組件推送到數(shù)組時(shí)遇到問題,代碼如下:import React, { useState } from 'react';import NewPageSidebar from '../NewPageSidebar/NewPageSidebar';import NewPageContent from '../NewPageContent/NewPageContent';import TextBlock from '../TextBlock/TextBlock';const NewPage = () => {    const [blocks, setBlocks] = useState([]);    const textButtonHandler = () => {        const key = blocks.length;        let array = blocks;        array.push(<TextBlock key={key} />);        setBlocks(array);        // This works        // setBlocks(<TextBlock key={key} />);    };    const imageButtonHandler = () => {    };    const spacingButtonHandler = () => {    };    return (        <div className="d-flex">            <NewPageSidebar                textButtonHandler={textButtonHandler}                imageButtonHandler={imageButtonHandler}                spacingButtonHandler={spacingButtonHandler}            />            <NewPageContent blocks={blocks} />        </div>    );};export default NewPage;出于某種原因,設(shè)置數(shù)組直接setBlocks(<TextBlock key={key} />);有效,但推送無效。我在這里做錯(cuò)了什么?
查看完整描述

2 回答

?
千巷貓影

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

這里的問題不在于組件未能添加到陣列中。問題在于它的添加方式。


根據(jù)文檔。你不應(yīng)該直接改變狀態(tài)。由于狀態(tài)是一個(gè)變異操作,因此狀態(tài)正在發(fā)生變異,因此重新渲染可能不起作用。


始終創(chuàng)建一個(gè)新數(shù)組,然后將舊部分和新部分合并在一起。


const textButtonHandler = () => {

    const key = blocks.length;

    // This should work

    setBlocks([...blocks, <TextBlock key={key} />]);

    // Code below should also work, because concat does not mutate original state

    // const array = blocks;

    // array.concat(<TextBlock key={key} />);

    // setBlocks(array);

};


查看完整回答
反對(duì) 回復(fù) 2022-10-13
?
九州編程

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

React 狀態(tài)管理使用shallow comparison?;诒容^,它更新狀態(tài)并重新渲染組件。如果引用相同,則不會(huì)進(jìn)行渲染。


let array = blocks; //It create reference to array block.

//即使我們將元素推入數(shù)組,我們也不會(huì)改變狀態(tài)塊


array.push(<TextBlock key={key} />);  // still array and block having same reference


setBlocks(array); // this will passed the same array reference

由于參考相同,因此沒有突變。因此,沒有狀態(tài)更新,因此沒有重新渲染。


要使其工作,請(qǐng)進(jìn)行以下更改。


改為setBlocks(array);使用setBlocks([...array]);


或者


let array = [...blocks];


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

添加回答

舉報(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)