这个问题可能是由于组件没有正确地连接到Redux store,或者 mapStateToProps 和 mapDispatchToProps 函数没有正确地映射 state 和 dispatch 到组件的 props。请按照以下步骤检查和解决问题:
npm install react-redux
<Provider>
组件包裹,并传递 Redux store 作为属性:import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
connect
函数,并正确地使用它:import React from 'react';
import { connect } from 'react-redux';
const MyComponent = (props) => {
// 使用从 Redux store 映射的 props
const { myProp } = props;
return (
<div>
{/* 渲染 myProp */}
</div>
);
};
// 将 Redux store 中的 state 映射到组件的 props
const mapStateToProps = (state) => ({
myProp: state.myProp,
});
// 将 Redux store 中的 dispatch 映射到组件的 props
const mapDispatchToProps = (dispatch) => ({
// 如果需要,可以在这里添加 dispatch 函数
});
// 使用 connect 函数连接组件和 Redux store
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
import { createStore, combineReducers } from 'redux';
const initialState = {
myProp: 'initial value',
};
const myReducer = (state = initialState, action) => {
switch (action.type) {
case 'UPDATE_MY_PROP':
return { ...state, myProp: action.payload };
default:
return state;
}
};
const rootReducer = combineReducers({
myProp: myReducer,
});
const store = createStore(rootReducer);
export default store;
领取专属 10元无门槛券
手把手带您无忧上云