javascript - 我无法更新 native react 中数组项的状态

Question

我有这个变量

const routes = [{data : 'Home' , icon : 'home' , keep:true , txt:'Home'} , {data : 'NECard' , icon : 'card' , keep:true , txt:'Your Card'} , {data : 'Notifications' , icon : 'notifications' , color : '#EB4D4B' , count : 27 , keep:true , txt:'Notifications'} , {data : 'Requests' , icon : 'contacts' , color : '#0097E6' , count : 8 , keep:true , txt:'Requests'} , {data : 'Saved' , icon : 'bookmark' , color : '#FBC531' , count : 51 , keep:true , txt:'Saved'} , {data : 'Logout' , icon : 'ios-exit' , keep:true , txt:'Logout'}];

我在构造函数中设置状态

this.state = {routes : routes};

安装组件后我也运行这个

componentDidMount()
  {
    this.fetchNotReadedNotis();
  }

最后一步

    async fetchNotReadedNotis()
    {
       this.state.routes[2].count = 392;
       this.forceUpdate();
    }

使用 setState 也不起作用

 async fetchNotReadedNotis()
        {
           var rts = this.state.routes;
           rts[2].count = 392;
           this.setState({routes:rts});
        }

预期是将routes[2] count 属性设置为392

但完全没有变化，还是27

我的代码有问题吗？

Answer 1

您应该使用 this.setState() 函数来更新 react 状态。您不应该直接改变状态。阅读文档 here