我不确定为什么我在使用React Redux时看到未定义

Question

So i'm trying to integrate redux into my react code and i'm getting a problem where the array i'm trying to access is undefined. It is the console.log statement in the first block of code. I'm just trying to read data from the redux store. I've been trying to figure out why this is a problem as my object types should be fine and it should be connected correctly. I'm just not sure at this point.

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 for parent component

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
    }
}

Action for parent component

import {ADD_INTEREST} from './Constant'

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

Combine Reducers

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

const rootReducer = combineReducers({
    interestCard,
})

export default rootReducer

Answer 1

Looking at this :

const rootReducer = combineReducers({
    interestCard,
})

you should access the state like this : state.interestCard.skillList and not this way state.skillList .

Something else that's wrong is that inside the reducer interestCard , your initial state suggests that the state is an object, not an array ! so this return [...state, action.payload] will throw an error.

And Last thing :

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

This won't work, because console.log is not evaluated to a String or to a React element or to a list of these 2.