Javascript 如何在删除后强制react组件重新渲染

我有一个react组件，它呈现一个封面列表，还有一个按钮可以在单击时从列表中删除该书。我通过地图发送将删除操作传递给道具，通过地图状态将书架信息传递给道具。删除操作正在成功地从数据库中删除该书，并且正在命中我的减速机。但是，即使状态更新，图书列表组件也不会重新呈现（除非我重新加载，否则删除的图书不会消失）

从“React”导入React；
从“react router dom”导入{Link，withRouter}；
从“纯反应转盘”导入{CarouselProvider、Slider、Slide、ButtonBack、ButtonNext、Image、Dot}；
类BookshelfFindExItem扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{this.props.bookshelf.name}
{this.props.bookshelf.book_id.map（（id，index）=>(
this.props.deleteBookFromBookshelf（{book\u id:id，bookshelf\u id:this.props.bookshelf.id}}>
X
))}
返回
下一个
);
}
}
使用路由器导出默认值（BookshelfFindExItem）我很怀疑我知道发生了什么事-有没有可能您正在推送一个保存在状态中的阵列副本，然后将状态设置为该状态？当您推送到一个数组（或将一个项目添加到集合或任何类似的对象）时，您仍然会在内存中得到相同的列表对象（尽管内容不同）。React检查是否有新列表，它会看到旧列表，看到新列表，并说“嘿，它们在内存中是相同的对象，所以既然它们是相同的，我甚至不需要触发
shouldComponentUpdate

我已经制作了一个这种行为的最小示例，以便您可以看到它的实际作用：

如果点击第一个按钮，您可以在控制台中看到新状态实际上是正确的，但是呈现的列表永远不会更新（因为我上面讨论过）

但是，如果使用数组分解（
[…list]
），则最终返回相同的数组内容，但在新的数组对象中，会触发React更新

希望有帮助

忍者编辑：意识到我可以更具体一些，因为你说的是删除项目-
Array.pop
和
Array.splice（）
两者的行为方式相同，您仍在处理内存中的同一对象，因此不会触发组件更新。
我强烈怀疑我知道发生了什么事-有没有可能您正在推送保持状态的阵列副本，然后将状态设置为该状态？当推送到阵列时（或向集合中添加项目或任何类似的内容），您仍然会在内存中使用相同的列表对象（尽管内容不同）。React是检查是否有新列表，它会看到旧列表，看到新列表，然后说“嘿，它们在内存中是相同的对象，所以既然它们是相同的，我甚至不需要触发
shouldComponentUpdate

我已经制作了一个这种行为的最小示例，以便您可以看到它的实际作用：

如果点击第一个按钮，您可以在控制台中看到新状态实际上是正确的，但是呈现的列表永远不会更新（因为我上面讨论过）

但是，如果使用数组分解（
[…list]
），则最终返回相同的数组内容，但在新的数组对象中，会触发React更新

希望有帮助

忍者编辑：意识到我可以更具体一些，因为你说的是删除项目-
Array.pop
和
Array.splice（）
两者的行为方式相同，您仍在处理内存中的同一对象，因此不会触发组件更新。
您能告诉我们连接到商店的组件吗？您正在映射
这个.props.bookshelf.book\u id
。您是如何创建该数组的？您确定它得到了正确更新吗？我很抱歉作为我的jbuilder视图的一部分在后端创建该数组。我认为它没有得到正确的更新。我正在尝试让我的reducer在收到从书架上删除书本的操作后更新它。你能给我们看看连接到商店的组件吗？你正在映射
this.props.bookshelf.Book\u id
。你是如何创建它的hat数组？你确定它得到了正确的更新吗？我正在后端创建该数组，作为jbuilder视图的一部分。我认为它没有得到正确的更新。我正在尝试让我的reducer在收到“从书架上删除书本”操作后进行更新。