数据在我的组件中似乎没有定义,但它通常出现在mapStateToProps函数中



我正在使用react和redux制作一个基本的歌曲选择应用程序,但我有一些问题。在我的Songlist组件中的mapStateToProps()函数中,传递的state参数通常会获得一个值但是当我尝试在组件中记录道具时,我得到一个未定义的值

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)

我不知道SongList在哪里被调用,用什么道具。我不知道Redux,但是碰巧,你在combineReducers里传递了一首没有s的歌,也许这是相关的。

最新更新