无法将 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 = () => {&nbsp; &nbsp; const key = blocks.length;&nbsp; &nbsp; // This should work&nbsp; &nbsp; setBlocks([...blocks, <TextBlock key={key} />]);&nbsp; &nbsp; // Code below should also work, because concat does not mutate original state&nbsp; &nbsp; // const array = blocks;&nbsp; &nbsp; // array.concat(<TextBlock key={key} />);&nbsp; &nbsp; // setBlocks(array);};

Answer 2

React 状态管理使用shallow comparison。基于比较，它更新状态并重新渲染组件。如果引用相同，则不会进行渲染。let array = blocks; //It create reference to array block.//即使我们将元素推入数组，我们也不会改变状态块array.push(<TextBlock key={key} />);&nbsp; // still array and block having same referencesetBlocks(array); // this will passed the same array reference由于参考相同，因此没有突变。因此，没有状态更新，因此没有重新渲染。要使其工作，请进行以下更改。改为setBlocks(array);使用setBlocks([...array]);或者let array = [...blocks];