Javascript Redux can';t映射数组
我是console.log,它看起来很完美。Javascript Redux can';t映射数组,javascript,react-native,redux,axios,Javascript,React Native,Redux,Axios,我是console.log,它看起来很完美。 这是一张图片: 如图所示,初始状态-->案例1-->案例2 renderCoinCards() { const { crypto } = this.props; console.log('Crypto.data : '+crypto.data+' , '+'Crypto.isFetching : '+crypto.isFetch) } 但是当我尝试映射数据时发生了错误。 这是一张图片: 它的工作方式类似于ini
这是一张图片:
如图所示,初始状态-->案例1-->案例2
renderCoinCards() {
const { crypto } = this.props;
console.log('Crypto.data : '+crypto.data+' , '+'Crypto.isFetching : '+crypto.isFetch)
}
但是当我尝试映射数据时发生了错误。
这是一张图片:
它的工作方式类似于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)
>
减速器
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.data
将为null
,则无法对其进行映射。映射之前,请确保crypto.data的数组长度大于0
您可以在映射函数之前执行此操作
if(crypto.data.length === 0) return null;
所以它只是在map函数之前停止。如果数组长度大于0,则继续加密是一个对象数组,但未定义Crypto.data。你需要改变
console.log('Crypto.data : '+crypto.data+' , '+'Crypto.isFetching : '+crypto.isFetching+' , '+'Crypto.data.map : '+crypto.data.map((a)=>a.name))
到
特别是对于映射,更改:
crypto.data.map((a)=>a.name)
到
您希望加密的输出是什么。根据您的reducer,我没有看到“name”字段,因此map函数可能正在工作,但没有返回“name”。我认为您应该会收到某种错误?“name”是来自Api的对象中的一个键,我想显示其中的信息
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)