我有以下代码
商店/index.js
const DEFAULT_STATE = {
auth: { isAuthenticated: false },
error: { message: null },
tracks: [],
uploadedTrack: {}
};
商店/reducers/index.js
import auth from './auth';
import error from './error';
import {tracks, uploadedTrack} from './tracks';
export default combineReducers({
auth,
tracks,
uploadedTrack,
error
});
store/reducers/tracks.js
import {UPLOADED_TRACK, SET_CURRENT_USER_TRACK} from '../actionTypes';
export const tracks = (state = [], action) => {
switch(action.type) {
case SET_CURRENT_USER_TRACK:
return action.tracks;
default:
return state;
}
}
export const uploadedTrack = (state = {}, action) => {
switch(action.type) {
case UPLOADED_TRACK:
return action.track;
default:
return state;
}
};
商店/actions/tracks.js
export const setTrack = tracks => ({
type: SET_CURRENT_USER_TRACK,
tracks
});
export const setUploadedTrack = track => ({
type: UPLOADED_TRACK,
track
});
export const getUserTrack = () => {
return async dispatch => {
try {
const {token, ...tracks} = await api.call('get', 'tracks/user');
dispatch(setTrack(tracks));
dispatch(removeError());
} catch (err) {
const {error} = err.response.data;
dispatch(addError(error.message));
}
};
};
组件/trackList.jsx
componentDidMount() {
const {getUserTrack} = this.props;
getUserTrack();
}
render() {
var {authType} = this.props;
const {auth} = this.props;
const {tracks} = this.props;
console.log("Track: ", tracks)
一切似乎都有效,因为 Redux 存储上的“tracks”包含我的六个轨道列表,但是当我尝试从控制台上的“tracks”变量打印此信息时,此打印“未定义”。 奇怪的是,我在控制台上的“调用”包含我的六个轨道...... 你能帮助我吗? 我不知道我的错误在哪里,我尝试应用在网络上找到的解决方案,但没有任何效果。
最佳答案
你能展示如何将你的 redux 状态映射到你的组件吗?如果你的 redux store 包含六个轨道,但你无法在 React 组件中显示它们,问题可能是你如何将你的存储绑定(bind)到你的组件(当你在 components/trackList.txt 中调用 connect() 时)。 jsx
)。
关于javascript - React - Redux - this.props 返回始终未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54237136/