I can't update state for array item in react native

Question

I have this variable

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'}];

I set the state in the constructor

this.state = {routes : routes};

also after mounting the component I run this

componentDidMount()
  {
    this.fetchNotReadedNotis();
  }

the last step

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

using setState is also not working

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

the expected is to set the routes[2] count property to 392

but no changes at all , it still 27

is there something wrong with my codes?

score 2 · Answer 1 · answered Jul 03 '18 at 12:32

2

You should use this.setState() function to update react state. You should not mutate state directly. Read Docs here

answered Jul 03 '18 at 12:32

Dinesh undefined

5,490
2
19
40

Hi Dinesh , I found this answer https://stackoverflow.com/a/29537485/9815465 , my codes should run – 27mdmo7sn Jul 03 '18 at 12:34
how ever using this.setState also not update , I'll update my question – 27mdmo7sn Jul 03 '18 at 12:36

Tholle · Answer 2 · 2018-07-05T17:54:18.583

You should not mutate state directly in React. You should use setState to update the state.

Example

class App extends React.Component {
  state = {
    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" }
    ]
  };

  componentDidMount() {
    this.fetchNotReadedNotis();
  }

  fetchNotReadedNotis = async () => {
    this.setState(previousState => {
      const routes = [...previousState.routes];

      return {
        routes: [
          ...routes.slice(0, 2),
          { ...routes[2], count: 392 },
          ...routes.slice(3)
        ]
      };
    });
  };

  render() {
    return (
      <div>
        {this.state.routes.map(route => (
          <div key={route.data}>
            {route.data} {route.count}
          </div>
        ))}
      </div>
    );
  }
}

reisdev · Answer 3 · 2018-07-03T12:58:43.007

You should update state directly. Do as below:

fetchNotReadedNotis = async () => {
   var routes = Object.assign([],this.state.routes)
   routes[2].count = 392
   this.setState({routes: routes},() => { this.forceUpdate() })
}

Detail: Your fetchNotReadedNotis wasn't binded to your component, so it can't mutate the state of it. The this reference inside your method wasn't your component. Now, doing the fetchNotReadedNotis = async () => {}, it is binded to your component, and then, it will mutate the state properly.

class App extends React.Component {
    constructor(props){
      super(props)
      this.state = {
        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'}]
      }
    }
    componentDidMount(){
        this.fetchNotReadedNotis();
    }
    fetchNotReadedNotis = () => {
       var routes = Object.assign([],this.state.routes)
       routes[2].count = 392
       this.setState({routes: routes},() => { this.forceUpdate()})
    }
    render() {
        return(
        <div>
           {this.state.routes.map(route => <p> {route.data} {route.count}</p>)}
        </div>
      )
    }
}

ReactDOM.render(<App/>,document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"> </div>

same , it renders only when the whole variable which called routes change ,, changing element on it , or property of element on it , all this not works — 27mdmo7sn, Jul 03 '18 at 12:48

I can't update state for array item in react native

3 Answers3

Linked