Невозможно использовать функцию карты после действия отправки, React + Redux

Question

Итак, я делаю запрос API GET и устанавливаю данные для редуктора, но компонент рендерит дважды, сначала перед отправкой, а затем после, первый вызывает проблему с функцией карты

что я могу сделатьчтобы избежать рендеринга дважды и решить проблему с функцией карты?

App.js

componentDidMount(){
      this.props.carregarLojas();
    }

render(){
   const { lojasTeste } = this.props;
   //rendering 2 times
   console.log(lojasTeste);

   return(
    <div>
        lojasTeste.map((i, index) => (
        <h1>{i.name}</h1>
        ))
    </div>
   )

}

const mapStateToProps = store => ({
    lojasTeste: store.lojaState.lojasTeste
});

const mapDispatchToProps = dispatch => {
    return {
        carregarLojas: () => {
        dispatch(carregarLojas());
      }
    };
  };

export default connect(mapStateToProps, mapDispatchToProps)(App);

Action.js

export const setarLojas = (lojas) =>{
    return {
      type: SETAR_LOJAS,
      data: lojas
    }
  }

  export const carregarLojas = () => {
    return (dispatch) => {
      return API.get('loja')
      .then(response => {
        dispatch(setarLojas(response.data))
      })
      .catch(error => {
        throw(error);
      })
    }

Reducer.js

const initialState ={
    lojasTeste: {}
}

export const lojaReducer = (state = initialState, action) => {
   switch (action.type){
     case SETAR_LOJAS:
      return {
      ...state,
      lojasTeste: action.data 
      }
     default:
       return state;
   }
}

Answer 1

Двойной рендер абсолютно нормален: ваш компонент рендерит один раз, затем вызывает метод carregarLojas, который является асинхронным.После разрешения метод обновит ваше хранилище редуксов, которое связано с реквизитом вашего компонента (mapStateToProps).Когда реквизит обновляется, он автоматически вызывает повторное рендеринг.

Кроме того, для вашей проблемы с картой вы не инициализировали lojasTeste как массив, а как объект.Вы не можете использовать карту на объекте (ср https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map)