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);
};

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];
添加回答
舉報(bào)