数据在我的组件中出现未定义，但它通常出现在 mapStateToProps 函数中

Question

我正在使用 React 和 redux 制作一个基本的歌曲 select 应用程序，但我遇到了一些问题。在我的 Songlist Component 的 mapStateToProps() 函数中，传递的 state 参数通常会得到一个值但是当我尝试在 Component 中记录 Props 时，我得到的值是 undefined

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import {Provider} from 'react-redux'
import {createStore} from 'redux'
import reducers from './reducers'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={createStore(reducers)}>
      <App />
    </Provider>
  </React.StrictMode>
);

动作

export const selectSong = (song) => {

    return {
        type: 'SELECT_SONG',
        payload: song
    }
}

减速机

import { combineReducers } from 'redux'
const songReducer=()=>{
    return [
        {title: 'El Sawarekh ft. Zuksh & Shehta Karika – Ekhwaty' ,duration:'3:50'},
        {title: 'Sherine – Masha’er' ,duration:'4:00'},
        {title: 'Hala Al Turk – Zahgana' ,duration:'2:54'},
        {title: 'Hamza Namira – Dari Ya Alby' ,duration:'5:00'},
    ]
}

const selectedSongReducer=(selectedSong=null,action)=>{
    if(action.type==='SELECT_SONG'){
        return action.payload
    }
    return selectedSong
}

export default combineReducers({
    song:songReducer,
    selectedSong:selectedSongReducer
})

SongList.js

import React, { Component } from 'react'
import {connect} from 'react-redux'
class SongList extends Component {
    render() {
        console.log(this.props)   //First console  => undefined
        return (
            <div>SongList</div>
        )
    }
}

const mapStateToProps =state=>{
    console.log(state)              //Second console => Array(4)
    return {songs: state.songs}
}


export default connect(mapStateToProps)(SongList)

Answer 1

我没看到 SongList 是在哪里调用的，用什么道具。我不了解 Redux，但碰巧你在 combineReducers 中传递了没有 s 的歌曲，也许这是相关的。

数据在我的组件中出现未定义，但它通常出现在 mapStateToProps 函数中

data appear undefined in my component, but it normally appears inside the mapStateToProps function

javascript

reactjs

redux