我不確定為什么我在使用React Redux時看到未定義

Question

所以我試圖將redux集成到我的react代碼中，並且遇到一個問題，即我嘗試訪問的數組未定義。 這是第一段代碼中的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)

母組件的減速器

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沒有被評估為字符串，React元素或這兩個列表。