无法将 React 组件推送到数组中

Question

我在使用 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;出于某种原因，设置数组直接setBlocks(<TextBlock key={key} />);有效，但推送无效。我在这里做错了什么？

Answer 1

这里的问题不在于组件未能添加到阵列中。问题在于它的添加方式。

根据文档。你不应该直接改变状态。由于状态是一个变异操作，因此状态正在发生变异，因此重新渲染可能不起作用。

始终创建一个新数组，然后将旧部分和新部分合并在一起。

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

};

Answer 2

React 状态管理使用shallow comparison。基于比较，它更新状态并重新渲染组件。如果引用相同，则不会进行渲染。

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

由于参考相同，因此没有突变。因此，没有状态更新，因此没有重新渲染。

要使其工作，请进行以下更改。

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

或者

let array = [...blocks];