Javascript Can'；t将React组件推到数组中

我在使用React将组件推入数组时遇到问题，代码如下：

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;

import React，{useState}来自“React”；
从“../NewPageSidebar/NewPageSidebar”导入NewPageSidebar；
从“../NewPageContent/NewPageContent”导入NewPageContent；
从“../TextBlock/TextBlock”导入TextBlock；
const NewPage=（）=>{
const[blocks，setblock]=useState（[]）；
const textButtonHandler=（）=>{
const key=blocks.length；
让数组=块；
array.push（）；
立根锁（阵列）；
//这很有效
//立根锁（）；
};
常量imageButtonHandler=（）=>{
};
常量spacingButtonHandler=（）=>{
};
返回(
);
};
导出默认新页面；

---

出于某种原因，直接设置数组

setBlocks（）起作用，但推送不起作用。我做错了什么？
这里的问题不是组件无法添加到阵列中。问题在于它被添加的方式

据报道。您应该不要直接变异状态。由于状态是一个变异操作，状态正在变异，因此重新渲染可能无法工作

始终创建新阵列，然后将旧零件和新零件合并在一起

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

const textButtonHandler=（）=>{
const key=blocks.length；
//这应该行得通
立根块（[…块，]）；
//下面的代码也应该可以工作，因为concat不会改变原始状态
//常量数组=块；
//array.concat（）；
//立根锁（阵列）；
};
响应状态管理使用。
基于比较，它更新状态并重新渲染组件。
如果引用相同，则不会进行渲染

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

//即使我们将元素放入数组中，我们也不会改变状态块

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

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

发布您的NewPageContent代码，这就是问题所在。当直接执行setBlock时，您不是以数组的形式发送它，而是以单个组件的形式传递它。NewPageContent组件只适用于单个组件，不适用于数组。我忘记了状态的这个变异规则。谢谢
let array = [...blocks];