Question

使用AngularJS后，我发现React状态的不变性有点乏味。例如，我需要从状态中的数组中删除其ID。这是州：

 state = {       
    pages: []
 }

这是在DELETE ajax成功后从数组中删除项目：

 deletePage = (id)=>{
   ajax(`/content/${id}/delete`,'delete')
   .then(({data})=>{
     if(data.status === 'ok'){
       let stateClone = _.cloneDeep(this.state);
       stateClone.pages = stateClone.pages.filter(page=> page.id != id);
       console.log('newstate')
       this.setState(()=>(stateClone))
     }

    })
  }

我知道它看起来很荒谬，尤其是因为cloneDeep方法。这是我能想到的最容易实现的方法，同时避免任何原始状态的突变。

围绕这个问题的惯例是什么？

Answer 1

这不是一个React问题..它是一个JavaScript问题，因为嵌套对象是引用的。

此代码：

let stateClone = _.cloneDeep(this.state);
stateClone.pages = stateClone.pages.filter(page=> page.id != id);
console.log('newstate')
this.setState(()=>(stateClone))

通常会被重写为：

this.setState(state => ({
  pages: state.pages.filter(page => page.id !== id)
}))

由于在调用setState时会保留顶级密钥，因此您无需克隆它们。即使他们不是，你也可以这样做：

this.setState(state => ({
  ...state, // not needed for React's `setState`
  pages: state.pages.filter(page => page.id !== id)
}))

尽量让你的州保持平稳。这是对所有应用程序的建议，而不仅仅是React的应用程序。

从React组件状态中删除项目的最有效/最常用的方法是什么？

1 个答案: