我在用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(可以工作，但push不能工作。 我在这里做错了什么？
这里的问题不是组件无法添加到数组中。 问题在于它的添加方式。
根据医生的说法。 不应直接改变状态。 由于state是一个变异操作，所以状态正在发生变异，因此重新呈现可能无法工作。
始终创建一个新数组，然后将旧部分和新部分合并在一起。
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);
};
反应状态管理使用浅层比较。 在比较的基础上，更新状态并重新呈现组件。 如果引用相同，则不会发生渲染。
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];
