Javascript 从Redux状态映射数组时，如何仅重新呈现新的子组件？

上下文

我有一个Redux状态，其中我有一个项目数组。每次单击菜单中的链接时，都会将一个项目添加到此数组中

在使用

connect（mapstatetops）（Component）连接到存储的我的一个组件中

我通过这个数组映射并加载子组件。这些子组件从API获取数据

问题

每次向数组中添加新项时，所有子组件都会重新渲染，因为它映射的数组会发生更改。我只希望渲染新添加的项，其余项保持原样。我知道你可以用useMemo做一些事情，但我不知道如何正确地使用映射

---

谢谢所有能帮助我的人

您可以对每个项目使用纯组件：

const id=（（id）=>（）=>id++）（1）；
const Item=React.memo（函数项（{Item，increase}）{
const rendered=React.useRef（0）；
rendered.current++；
返回(

{item.id}-rendred{rendered.current}计数：{''}
{item.count}
增加（item.id）}>
增加计数

);
});
常量应用=（）=>{
const[items，setItems]=React.useState（[]）；
常量附加项=（）=>
setItems（（items）=>[{id:id（），count:0}，…items]）；
//使用useCallback创建一个递增函数
//永远不会改变，所以你永远不会通过新的增长
//功能到项目
常量增加=React.useCallback(
//将回调传递给状态设置器，以使项不会
//useCallback的依赖项
（id）=>
setItems（（currentItems）=>
currentItems.map（（项目）=>
item.id==id
？{…项，计数：项.计数+1}
：项目
)
),
[]
);
返回(
+
{items.map（（item）=>(
))}
);
};
ReactDOM.render（，document.getElementById（'root'））
您可以为每个项目使用纯组件：


const id=（（id）=>（）=>id++）（1）；
const Item=React.memo（函数项（{Item，increase}）{
const rendered=React.useRef（0）；
rendered.current++；
返回(

{item.id}-rendred{rendered.current}计数：{''}
{item.count}
增加（item.id）}>
增加计数

);
});
常量应用=（）=>{
const[items，setItems]=React.useState（[]）；
常量附加项=（）=>
setItems（（items）=>[{id:id（），count:0}，…items]）；
//使用useCallback创建一个递增函数
//永远不会改变，所以你永远不会通过新的增长
//功能到项目
常量增加=React.useCallback(
//将回调传递给状态设置器，以使项不会
//useCallback的依赖项
（id）=>
setItems（（currentItems）=>
currentItems.map（（项目）=>
item.id==id
？{…项，计数：项.计数+1}
：项目
)
),
[]
);
返回(
+
{items.map（（item）=>(
))}
);
};
ReactDOM.render（，document.getElementById（'root'））

你能将源代码粘贴到实际帖子中吗？请添加可复制的示例，使用它添加沙盒总是更好你能将源代码粘贴到实际帖子中吗？请添加可复制的示例，使用它添加沙盒总是更好谢谢，这很有效。我使用的是React.useMemo，它不断抛出错误。把他们搞混了哈哈。谢谢！谢谢，这很有效。我使用的是React.useMemo，它不断抛出错误。把他们搞混了哈哈。谢谢！