react修改state里面的数据不生效

项目场景：

react定义在this.state中的数据,在函数中操作state的数据,但是页面无法更新出来

---

问题代码

 在获取数据的函数里操作了topNav的值,控制台输出也是可以看到效果:

---

原因分析：

后面了解到react的语法是不支持直接修改state里面的值,需要把state的值结构出来操作然后再使用setState修改

---

正确代码如下：

export default class SubaDataModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      topNav: [
        { name: '企业总规模', num: 0, id: 5 },
        { name: '企业总数', num: 0, id: 0 },
        { name: '上市企业数', num: 0, id: 3 },
        { name: '独角兽企业数量', num: 0, id: 1 },
        { name: '专精特新企业数量', num: 0, id: 2 },
        { name: '本季度新入驻企业', num: 0, id: 4 },
      ],
    };
  }
 componentDidMount() {
    this.getCompanyAnalysis();
  }

 //获取概览统计数据
  getCompanyAnalysis = async () => {
    const res = await companyAnalysis();
    console.log('res=====>>>>>', res.data);
    const data = res.data;
    //从state解构
    const { topNav } = this.state
    // 修改数据
    topNav.forEach(item => {
      if (item.name == '企业总规模') {
        item.num = data.companyScale;
      } else if (item.name == '企业总数') {
        item.num = data.companyNum;
      } else if (item.name == '上市企业数') {
        item.num = data.publishedNum;
      } else if (item.name == '独角兽企业数量') {
        item.num = data.topCompanyNum;
      } else if (item.name == '专精特新企业数量') {
        item.num = data.masteryCompanyNum;
      } else if (item.name == '本季度新入驻企业') {
        item.num = data.newCompanyNum;
      }
    })
    //重新赋值
    this.setState({ topNav: topNav })
  };

      render() {
    const { topNav } = this.state;
    return (
      

        

          返回
          {topNav.map((item, j) => {
            return (
              
 this.handleModalClick(item)}
              >
                
{item.num}
                
{item.name}
              
            );
          })}
        
      
    );
  }
}