setState в функции карты реагировать

Question

Мое требование - обновить значение состояния в функции карты componentWillReceiveProps.

В журнале консоли все, что я получаю, это 1 с, но подписка содержит 0 и 1 с

Ссылка на окно консоли: http://prntscr.com/jqifiz

constructor(props) {
    super(props);
      this.state = {
        regionAll: [],
      };
    }
componentWillReceiveProps(nextProps){
    if(nextProps.apiData !== false ){
      nextProps.apiData.data.datacenter.category.map((sub)=> {
        console.log(sub.subscribed,'sub.subscribed');
        this.setState({
          regionAll: [
            ...this.state.regionAll,
            sub.subscribed
          ]
        },()=>{
          console.log(this.state.regionAll,'sub');
        })
      })
  }

Это правильный способ обновления состояния вactjs?

Answer 1

setState - async.In Array#map, вызывается несколько раз. Только последнее значение добавляется в массив regionAll, а не все из-за асинхронного вызова setState с несколькими значениями..

Вы можете собрать все значения sub.subscribed в одном массиве с помощью Array # reducer , а затем выполнить обновление состояния.

if (nextProps.apiData !== false) {

    let sub = nextProps
        .apiData
        .data
        .datacenter
        .category
        .reduce((accum, sub) => [
            ...accum,
            sub.subscribed
        ], [])

    this.setState({
        regionAll: [...sub]
    }, () => {
        console.log(this.state.regionAll, 'sub');
    })
}

Answer 2

Проблема возникает из-за того, что вызовы setState являются пакетными, и вы обновляете состояние реакции на основе prevState, вместо этого вам следует использовать функциональное состояние для таких случаев

componentWillReceiveProps(nextProps){
    if(nextProps.apiData !== false ){
      nextProps.apiData.data.datacenter.category.map((sub)=> {
        console.log(sub.subscribed,'sub.subscribed');
        this.setState(prevState => ({
          regionAll: [
            ...prevState.regionAll,
            sub.subscribed
          ]
        }),()=>{
          console.log(this.state.regionAll,'sub');
        })
      })
  }

Однако вызывать setState на карте плохая идеявместо этого вы можете получить данные с карты и вызвать setState только один раз, как

componentWillReceiveProps(nextProps){
    if(nextProps.apiData !== false ){
      const subscribed = nextProps.apiData.data.datacenter.category.map((sub)=> {
        console.log(sub.subscribed,'sub.subscribed');
        return sub.subscribed;
      })
      this.setState(prevState => ({
          regionAll: [
            ...this.state.regionAll,
            ...subscribed
          ]
        }),()=>{
          console.log(this.state.regionAll,'sub');
     })
  }