Dispatch Action，React + Redux之后無法使用地圖功能

Question

所以我正在執行一個API GET請求並在reducer上設置數據，但是該組件呈現兩次，第一次在分派之前，然后在第二次，第一次導致地圖功能問題

我應該怎么做才能避免兩次渲染並解決地圖功能問題？

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方法。 解決后，該方法將更新您的redux存儲，該存儲與組件的props（mapStateToProps）連接。 更新道具后，它會自動重新渲染。

另外，對於地圖問題，您沒有將lojasTeste初始化為數組，而是將其初始化為對象。 您不能在對象上使用地圖（參見https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map ）