Redux 无法映射数组答案

【问题标题】：Redux can't map ArrayRedux 无法映射数组
【发布时间】：2018-03-10 14:46:56
【问题描述】：

我是 console.log 这个，它看起来很完美。
这是记录器图片：https://i.stack.imgur.com/PSRhV.jpg
喜欢它显示类似这样的初始状态-->案例 1 --> 案例 2

renderCoinCards() {
        const { crypto } = this.props;
       console.log('Crypto.data : '+crypto.data+' , '+'Crypto.isFetching : '+crypto.isFetch)
    }

但是当我尝试映射数据时发生错误。
这是记录器图片：https://i.stack.imgur.com/VpNPF.jpg
它的工作方式类似于 initialState --> 停止工作显示错误

    renderCoinCards() {
                const { crypto } = this.props;
               console.log('Crypto.data : '+crypto.data+' , '+'Crypto.isFetching : '+crypto.isFetching+' , '+'Crypto.data.map : '+crypto.data.map((a)=>a.name))
}

你能告诉我为什么以及如何解决它。
这里是源代码

组件

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


    renderCoinCards() {
                 const { crypto } = this.props;
                 console.log('Crypto : '+crypto) //logging
     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

【问题讨论】：

您希望 Crypto 中的输出是什么。根据您的减速器，我没有看到“名称”字段，因此 map 函数可能正在工作，但没有“名称”可以返回。我认为你应该得到某种错误？
"name" 是来自 api 的对象中的键
我想显示来自这个api.coinmarketcap.com//v1/ticker/?limit=10的信息

标签： javascript react-native redux axios

【解决方案1】：

看起来crypto.data 根本不是Array。这甚至是我们在您的控制台中可以看到的。如果crypto.data 将是null，则不能在其上绘制地图。

【讨论】：

【解决方案2】：

在映射之前，只需确保 crypto.data 的数组长度大于 0。

你可以在地图功能之前这样做

if(crypto.data.length === 0) return null;

所以它只是在地图功能之前停止。如果数组长度大于 0 则继续

【讨论】：

【解决方案3】：

Crypto 是一个对象数组，但 crypto.data 没有定义。你需要改变

console.log('Crypto.data : '+crypto.data+' , '+'Crypto.isFetching : '+crypto.isFetching+' , '+'Crypto.data.map : '+crypto.data.map((a)=>a.name))

到

console.log('Crypto.data : '+crypto+' , '+'Crypto.isFetching : '+crypto.isFetching+' , '+'Crypto.data.map : '+crypto.map((a)=>a.name))

专门用于映射，更改：

crypto.data.map((a)=>a.name)

到

crypto.map((a)=>a.name)

【讨论】：