javascript - 如何在 ReactJS 中没有任何给定事件的情况下更新 UI

Question

这个问题已经有答案了:

Why can't I directly modify a component's state, really? (7 个回答)

已关闭 4 年前。

我有一个 React 应用程序，我正在其中渲染一些图片和 gif，用户可以将其附加到帖子中。

现在我有一个 onClick每个图像上的处理程序，以便模式弹出操作，带有一些不同的选项，或者图片被删除(如果用户按住 ctrl 键):

showModalSpeceficHandler = (event, image) =>{
    let index = this.state.images.indexOf(image)
    if(event.ctrlKey){
     this.state.images.splice(index, 1);
 }else{
 this.setState(
     state => ({imageModalData: image}),
     () => this.showModalHandler()
 );
}

问题是，如果满足第一个条件， View 不会自动更新。而且我无法使用箭头函数来重新渲染，因为我在图像上使用了拼接方法。有没有办法让组件重新渲染，以便更新 UI？

我不确定是否应该将代码包装在 if 条件内、单独的处理程序内，或者我可以使用一些箭头函数语法或类似语法？

编辑:

我更新了方法，因此动态设置状态:

 if(event.ctrlKey){
      this.setState(
          state => ({images: this.state.images.splice(index, 1)})
      )

现在的问题是我想返回整个数组，而不仅仅是所选图片。

Answer 1

问题是您没有正确更新状态。如果你想改变状态，你必须使用setState，无论如何，否则React不知道它已经改变并且不会更新/渲染随着变化。请参阅React documentation了解更多详情。

由于您需要从数组中删除一个元素，因此您必须制作一个临时/中间副本进行修改，然后在 setState 函数中重新分配它:

let temp = this.state.images.slice(); //makes a shallow copy of the array
temp.splice(index, 1); //remove item
this.setState(prevState => ({ images: temp })); //update state