состояние асинхронной карты для реквизита, возвращающего неопределенное значение, в то время как нормальное значение возвращает

Question

import React from 'react';
import {connect} from 'react-redux';
import fetch from '../firebase/retrive_firebase';
import { database } from "../firebase/firebase";
import Filter_product_list from './product_list_filter';
import get_visible_products from '../selectors/get_visible_products';
class ViewProduct extends React.Component
{

    render()
    { 
        console.log(this.props.a);
        return(
            <div>
               <Filter_product_list />
            </div>   
        )
    }
}

const map_state_to_props=async(state)=>
{
    let firebase_product={}
 
     const promise=await fetch().then((response)=>{
        console.log('promise resolved');
        
        firebase_product=response
          firebase_product.map((entry)=>{console.log(entry)});
           return firebase_product
         //const filtered_products=await get_visible_products(firebase_product,state.filters);
         //console.log("filtered products",filtered_products);
    }).catch((err)=>{

    })
    console.log("what got retured from promise",promise)
     const filtered_products=get_visible_products(promise,state.filters);
    console.log("filtered products",filtered_products)
         return{
           //filtered_products,
           a:15,
        }
    // console.log("type of fetch",typeof(firebase_product))
    // firebase_product.map((product2)=>{console.log("products ",product2)});
    // console.log("product returned from fetch",firebase_product);
    // const product=get_visible_products(firebase_product,state.filters)
    // console.log("product returned from visible expenses",product);
};

export default connect(map_state_to_props,{})(ViewProduct);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Я использую асинхронное состояние карты для реквизита, и он возвращает неопределенный компонент в вышеупомянутом компоненте, с которым я соединялся с использованием избыточности. Я возвратил значениесопоставить состояние с реквизитом как объект, в котором ключ является, и я получил неопределенный в консоли из this.props.a

Answer 1

mapStateToProps не может быть асинхронным.Вы должны выполнить асинхронное действие с соответствующим промежуточным ПО, например, как redux-sagaПо сути, вы выполняете асинхронное действие в промежуточном программном обеспечении, устанавливаете его результат в своем хранилище через редуктор и распространяете его на свой компонент с помощью mapStateToProps.