Question

在记录器中看到任何正常数据加载成功。
您可以点击此链接查看https://i.stack.imgur.com/uTLpr.jpg
但是为什么这个加密道具是未定义的以及如何修复它。有没有人有任何想法？

组件

   class CryptoContainer extends Component {
           componentWillMount(){
             this.props.Fetchcoin()
           }


    renderCoinCards() {
                 const { crypto } = this.props;
                 console.log('Crypto : '+crypto) 
     return crypto.data.map((coin,index) => //Add this 
        <CoinCard 
            key={coin.name}
            coin_name={coin.name}
            symbol={coin.symbol}
            price_usd={coin.price_usd}
            percent_change_24h={coin.percent_change_24h}
            percent_change_7d={coin.percent_change_7d}
        />
    ) 
}  
         }


         function mapStatetoProps(state){
           return{
             crypto:state.crypto  
           }
         }

         export default connect(mapStatetoProps,{Fetchcoin})(CryptoContainer)
>

动作

export default function FetchCoin(){
    return dispatch => {
        dispatch({type:FETCHING_COIN_DATA})
        return axios.get(`https://api.coinmarketcap.com//v1/ticker/?limit=10`)
            .then(res => {
                dispatch({type:FETCHING_COIN_DATA_SUCCESS,payload:res.data})
            })
            .catch(err => {
                dispatch({type:FETCHING_COIN_DATA_FAIL,payload:err.data})
            })
    }
}

减速

 const initialState = {
        isFetching: null,
        data: [],
        hasError: false,
        errorMessage: null
    }
    export default function (state = initialState, action) {
        switch (action.type) {
            case FETCHING_COIN_DATA:
                return Object.assign({}, state, {
                    isFetching: true,
                    data: null,
                    hasError: false,
                    errorMessage: null
                })
            case FETCHING_COIN_DATA_SUCCESS:
                return Object.assign({}, state, {
                    isFetching: false,
                    data: action.payload,
                    hasError: false,
                    errorMessage: null
                })
            case FETCHING_COIN_DATA_FAIL:
                return Object.assign({}, state, {
                    isFetching: false,
                    data: action.payload,
                    hasError: true,
                    errorMessage: action.err
                })
            default:
                return state
        }
    }

并存储

const middleware = applyMiddleware(thunk,promise,logger)

const rootReducer = combineReducers({
    crypto:CyptoReducer
})

const Store = createStore(
    rootReducer,middleware
)

export default Store

我在商店中修复了拼写错误，但是当我在renderCoinCard中添加crypto.data.map（）时数据似乎仍然没有显示调试器显示

TypeError：无法读取null
的属性“map”

Answer 1

我认为你的rootReducer声明有问题。你提到＆＃34; cypto＆＃34; 而不是＆＃34;加密＆＃34; 。解决这个问题，它将工作，因为只有redux声明一个reducer，你在这里声明为＆＃34; cypto＆＃34;它预计＆＃34; cypto＆＃34;并失败。

Redux数据未定义

1 个答案: