最近寫專案時, 遇到了一個問題, 我明明

向陣列中push了資料, 但是列印的時候為[]陣列,但是空數組裡面有一條資料,length為1, 但是打印出來length發現長度為0

看程式碼
先來看這種情況

很正常對吧, 往陣列中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>
    );
  }
}
 

???
一臉懵逼了, 我明明push了一組資料為何為空呢

同樣,還是上面的程式碼我只是展開了打印出來的空陣列, 看似是空陣列, 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>
    );
  }
}
 

因為setState是以非同步方式執行, 所以可以看到先列印了render裡面,後列印回撥函式裡面的.
因為 js中的push是修改原陣列，不會返回新陣列. 而react中props和state任何一個值改變都會render, 所以在render中會列印陣列(這個陣列只是被修改了,但是沒有被返回)所以length還是0

從上面列印結果看到在setState的回撥中更新了setStateArr的值,其長度為1, 為何沒有再次render(再次列印’我是render中的setStateArr’呢)

那麼就使用到了setState, state本身無法直接更改, setState的設計是用來更新state的值,並且也會觸發render重新渲染.

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