我无法在本机反应中更新数组项的状态

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] 计数属性设置为 392

但完全没有变化，还是 27

我的代码有问题吗？

Answer 1

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

Answer 2

您应该直接更新状态。执行以下操作：

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

详细信息：您的 fetchNotReadedNotis 没有绑定到您的组件，因此它不能改变它的状态。您方法中的 this 引用不是您的组件。现在，执行fetchNotReadedNotis = async () => {}，它将绑定到您的组件，然后，它将正确地改变状态。

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>

Answer 3

你不应该直接在 React 中修改 state。您应该使用setState 来更新状态。

示例

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>
    );
  }
}