Question

所以我正在尝试将redux集成到我的反应代码中，并且我遇到了一个问题，我试图访问的数组是未定义的。它是第一个代码块中的console.log语句。我只是想从redux商店读取数据。我一直试图弄清楚为什么这是一个问题，因为我的对象类型应该很好，它应该正确连接。我现在还不确定。

InterestList.js

import React, {Component} from 'react'
import {connect} from 'react-redux'

class InterestList extends Component{
    constructor(props){
        super(props)
    }
    render() {
        return(
            <div className = 'container'>
                {console.log(this.props.skillList)}

            </div>
        )
    }
}

const mapStateToProps = (state) =>{
    return{skillList: state.skillList}
}

export default connect(mapStateToProps)(InterestList)

父组件的Reducer

import {ADD_INTEREST} from "./Constant";
const initialState = {
    skillList: [{skillName: '', skillValue: '', interestValue: ''}]
}
export function interestCard(state = initialState, action){
    switch(action.type){
        case ADD_INTEREST:
            return [...state, action.payload]
        default:
            return state
    }
}

父组件的行动

import {ADD_INTEREST} from './Constant'

export const addInterest = interest => ({
    type: ADD_INTEREST,
    payload: interest
})

结合减速器

import {combineReducers} from 'redux'
import {interestCard} from "./InterestCardReducer";

const rootReducer = combineReducers({
    interestCard,
})

export default rootReducer

Answer 1

看着这个：

const rootReducer = combineReducers({
    interestCard,
})

您应该访问以下状态：state.interestCard.skillList而不是state.skillList。

其他错误的是在reducer interestCard中，你的初始状态表明状态是一个对象，而不是一个数组！所以这个return [...state, action.payload]会抛出一个错误。

最后一件事：

   <div className = 'container'>
        {console.log(this.props.skillList)}
    </div>

这不起作用，因为console.log未计算为String或React元素或这些2的列表。

我不确定为什么我在使用react redux时看到未定义

1 个答案: