最近寫項目時, 遇到了一個問題, 我明明

向數(shù)組中push了數(shù)據(jù), 但是打印的時候為[]數(shù)組,但是空數(shù)組里面有一條數(shù)據(jù),length為1, 但是打印出來length發(fā)現(xiàn)長度為0

image.png

看代碼
先來看這種情況

image.png

image.png

很正常對吧, 往數(shù)組中push一組數(shù)據(jù), 長度為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了一組數(shù)據(jù)為何為空呢

image.png

同樣,還是上面的代碼我只是展開了打印出來的空數(shù)組, 看似是空數(shù)組, but 發(fā)現(xiàn)空數(shù)組里面有一條數(shù)據(jù),其長度length也明明為1, 為何打印出來的length確為0??????????????

這就是setState的原因,
可以發(fā)現(xiàn)下面的這種情況我們是寫在setState的回調(diào)函數(shù)里面的
我們再回調(diào)中打印下

  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是以異步方式執(zhí)行, 所以可以看到先打印了render里面,后打印回調(diào)函數(shù)里面的.
因為 js中的push是修改原數(shù)組，不會返回新數(shù)組. 而react中props和state任何一個值改變都會render, 所以在render中會打印數(shù)組(這個數(shù)組只是被修改了,但是沒有被返回)所以length還是0

從上面打印結(jié)果看到在setState的回調(diào)中更新了setStateArr的值,其長度為1, 為何沒有再次render(再次打印'我是render中的setStateArr'呢)

那么就使用到了setState, state本身無法直接更改, setState的設(shè)計是用來更新state的值,并且也會觸發(fā)render重新渲染.

image.png

image.png

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