最近写项目时, 遇到了一个问题, 我明明

向数组中push了数据, 但是打印的时候为[]数组,但是空数组里面有一条数据,length为1, 但是打印出来length发现长度为0

image.png

看代码
先来看这种情况

image.png

image.png

很正常对吧, 往数组中push一组数据, 长度为1
往下看

  static propTypes = {
  }

  constructor() {
    super();
    this.state = {
      arr: [],
      setStateArr: [],
    };
  }
  componentWillMount() {
    this.setState({
      hasDetail: true,
    }, () => {
      this.state.setStateArr.push({ name: '张三', sex: 'boy' });
    });
  }

  render() {
    console.log('我是render中的setStateArr', this.state.setStateArr);
    console.log('我是render中的setStateArr的长度', this.state.setStateArr.length);
    return (
      <div style={{ paddingTop: '15px' }}>
       121
      </div>
    );
  }
}

image.png

??????????????????????????????
一脸懵逼了, 我明明push了一组数据为何为空呢

image.png

同样,还是上面的代码我只是展开了打印出来的空数组, 看似是空数组, but 发现空数组里面有一条数据,其长度length也明明为1, 为何打印出来的length确为0??????????????

这就是setState的原因,
可以发现下面的这种情况我们是写在setState的回调函数里面的
我们再回调中打印下

  static propTypes = {
  }

  constructor() {
    super();
    this.state = {
      arr: [],
      setStateArr: [],
    };
  }
  componentWillMount() {
    this.setState({
      hasDetail: true,
    }, () => {
      this.state.setStateArr.push({ name: '张三', sex: 'boy' });
// 83行
      console.log('我是willMount中的setStateArr', this.state.setStateArr);
// 84行
      console.log('我是willMount中的setStateArr的长度', this.state.setStateArr.length);
    });
  }

  render() {
// 89行
    console.log('我是render中的setStateArr', this.state.setStateArr);
// 90行
    console.log('我是render中的setStateArr的长度', this.state.setStateArr.length);
    return (
      <div style={{ paddingTop: '15px' }}>
       121
      </div>
    );
  }
}

image.png

因为setState是以异步方式执行, 所以可以看到先打印了render里面,后打印回调函数里面的.
因为 js中的push是修改原数组，不会返回新数组. 而react中props和state任何一个值改变都会render, 所以在render中会打印数组(这个数组只是被修改了,但是没有被返回)所以length还是0

从上面打印结果看到在setState的回调中更新了setStateArr的值,其长度为1, 为何没有再次render(再次打印'我是render中的setStateArr'呢)

那么就使用到了setState, state本身无法直接更改, setState的设计是用来更新state的值,并且也会触发render重新渲染.

image.png

image.png

可以看到93行和94行又重新打印, 并且长度为1