Redux mapStateToProps不工作
Redux是一个用于JavaScript应用程序的可预测状态容器。它是一个用于管理应用程序状态的库，可以帮助开发人员更好地组织和管理应用程序的数据流。Redux的核心概念包括store、action和reducer。
在Redux中，mapStateToProps是一个用于连接Redux store和React组件的函数。它负责将Redux store中的状态映射到组件的props上，以便组件可以访问和使用这些状态。mapStateToProps函数接收整个Redux store作为参数，并返回一个包含需要映射到组件props的状态对象。
如果mapStateToProps不工作，可能有以下几个原因：
- 错误的使用了mapStateToProps函数：确保正确地导入和使用mapStateToProps函数，并将其作为connect函数的第一个参数传递。
- 错误的配置了Redux store：确保Redux store已经正确地配置和创建，并且已经将其提供给了应用程序的根组件。
- 错误的配置了reducer：确保reducer已经正确地配置，并且在创建Redux store时已经将其传递给了combineReducers函数。
- 错误的配置了action：确保正确地定义和使用了action，并且在reducer中正确地处理了这些action。
- 组件没有正确地连接到Redux store：确保组件已经通过connect函数连接到了Redux store，并且正确地传递了mapStateToProps函数。
如果以上步骤都正确无误，但mapStateToProps仍然不工作，可能需要进一步检查Redux store中的状态是否正确更新，并确保在组件中正确地访问和使用这些状态。
对于腾讯云相关产品和产品介绍链接地址，可以参考腾讯云官方文档或者腾讯云官方网站获取更详细的信息。
相关·内容
我从api中获取GameChart的数据，并更改redux状态。在GameChart.jsx文件中，当componentDidUpdate调用时，我绘制图表。但是，redux状态更改有时不调用componentDidUpdate。
控制台GameChart.jsx生命周期日志
GameChart.jsx控制台日志，当componentDidUpdate没有调用时(它神奇地发生在50/50的概率.)：
Chart mapStateToProps
Chart componentDidMount
Chart mapStateToProps
当redux状态更改时，GameChart.j
浏览 3提问于2019-12-16得票数 3
redux-form文档表明reduxForm()装饰器接受一个必需参数(配置对象)和四个可选参数(与在react-redux中传递给connect装饰器的四个参数相同)。但是，当我将mapStateToProps()函数作为参数传递给reduxForm()装饰器时，mapStateToProps()实际上并没有运行。请参阅下面的简化代码示例。解释器永远不会到达debugger语句。我对redux-form文档有什么误解吗？
import React from 'react';
import { reduxForm } from 'redux-form';
c
浏览 2提问于2016-04-12得票数 1
Action在使用mapDispatchToProps函数返回对象传递connect时没有在function redux中工作。它在通过Action时工作，直接在下面连接一些特定的东西。无法理解不同之处。
不工作：
const mapDispatchToProps = () => {
return {
increment,
decrement
}
}
const WrappedCounter = ReactRedux.connect(mapStateToProps, mapDispatchTo
浏览 6提问于2022-10-16得票数 0
回答已采纳
我有一个组件类，我正在使用redux来连接redux存储，但是当我试图将组件传递到connect函数时，我得到了一个错误。
class FileItem extends Component<IFileItemProps, undefined> {
}
const mapStateToProps = (state: IFileItemReduxState): IFileItemReduxProps => {
};
const mapDispatchToProps = (dispatch: Dispatch): IFileItemDispatchProps => {
}
浏览 0提问于2018-01-18得票数 3
回答已采纳
1回答
我很难将一些通过axios获取的数据传递到Redux存储中，以便在其他组件上使用。我有其他的动作和减速器是非常相似的，而且正在起作用，但这个不是。
数据流如下：
在筛选器中启动和获取componentcomponentDidMount中的，通过axiosupdateInfo (action)调用来用响应的数据来更新Redux存储，这是它不正确工作的地方。它属于默认的开关用例语句，而不是UPDATE_APPT_LIST操作。Info组件控制台记录道具，但只能找到其他还原器。
// actions/index.js
export const UPDATE_APPT_LIST = "UPDA
浏览 3提问于2020-07-28得票数 0
我很确定我有一些小的配置错误，因为我确实有这个工作。但是当我通过redux connect调用点击我的connect时，它被注入了我的还原剂。我的设计是：
App.js：
import React from 'react';
import BuildsContainer from '../containers/builds-container';
import NavBarContainer from '../containers/nav-bar-container';
class App extends React.Component {
浏览 1提问于2016-12-06得票数 2
回答已采纳
以下是错误连接到Redux的React组件的违规代码示例。
import React from 'react';
import { View, StyleSheet, ViewStyle, Text } from 'react-native';
import { connect } from "react-redux";
import { StoreState } from "../../store/storeState/storeState";
import { LogFactory, Logger } from "..
浏览 2提问于2021-01-28得票数 0
当我更改输入文本值并单击“保存”按钮时，“类别名称”将被更改。
CategoryName.js
class CategoryName extends Component {
render() {
return (
<>
<section className="CategoryName">
<div>
浏览 1提问于2018-09-28得票数 2
在输入字段中输入文本并单击submit按钮后，会发生错误: Uncaught :调度不是onSubmit上的函数
连接状态和道具似乎是正确的。
有什么不对的？
*/TODOLIPUT*/
import React from 'react'
import { connect } from 'react-redux'
import {addTodo} from '../actions/index'
import {bindActionCreators} from 'redux'
let AddTodo = ({ dispatc
浏览 3提问于2017-04-25得票数 0
回答已采纳
我正在使用React、Redux和React-Redux提供程序函数
const mapStateToProps = (store: any) => {
console.log("mapStateToProps", store.textTwo);
return store.textTwo;
};
如果我使用上面的mapStateToProps函数来connect react-redux的方法，并更新状态，它将console.log更改mapStateToProps函数，但不会重新呈现组件，甚至不会出现componentWillReceiveProps钩子。
浏览 15提问于2020-02-17得票数 0
2回答
我使用的是带有类型记录的Redux，不能在组件之间传递数据。
EmpList.tsx
function mapStateToProps(){//mapping here}
.... //body of a Component
export default connect(mapStateToProps)(EmpList)
Tool.tsx
import EmpList from './EmpList'
....
private empListTemp: RefObject<EmpList> = createRef()
问题是，我在Tool.tsx 'EmpL
浏览 6提问于2021-06-05得票数 0
回答已采纳
假设一个React + Redux应用程序包含一个包含的页面。
所有这些都是使用Redux状态控制的，如下所示：
let CheckboxComponent = React.createClass({
shouldComponentUpdate(nextProps) {
return nextProps.activeList !== this.props.activeList;
}
render() {
let isChecked = this.props.activeList.indexOf(this.props.myId) >= 0;
re
浏览 5提问于2016-12-13得票数 1
回答已采纳
我的组件需要调用graphql查询，但它需要的变量只能由redux使用。所以我已经将redux的连接映射到react apollo compose。但是我在从reducer获取数据时遇到了问题，并且调用不能正确加载。
class abc extends Component {
componentWillMount() {
console.log(this.props.variableData); // Getting empty object.
}
}
function mapDispatchToProps(dispatch) {
return bindAction
浏览 1提问于2018-06-01得票数 0
1回答
以前在我的类组件redux connect中，通常看起来像这样。这工作起来没有任何问题。 //File: MyComponent.jsx
//in below code this.props.selectProducts is not undefined and this works fine
const mapStateToProps = null;
const mapActionsToProps = {
selectProducts
};
export default con
浏览 13提问于2020-08-27得票数 0
回答已采纳
如果我创建自己的mapDispatchToProps函数，它就不能工作。如果我为connect提供一个普通的对象，那么它确实能工作，但是我需要调度功能。对于每一页的翻译，我是不是做错了什么？
const mapStateToProps = (state) => {
const { isFetching, lastUpdated, items, errors } = state.transactions; // fetch from redux state ;)
return {
translate: getTranslate(state.locale
浏览 0提问于2017-12-25得票数 1
回答已采纳
我有一个表单(redux- form )，它工作得很好。我正在尝试将defaultInitialValues与我在redux状态下的映射合并，我已经尝试了官方示例()，但我无法让它工作。
下面是工作代码(没有从状态获取映射)：
import React, { Component } from 'react';
import { getFormSyncErrors, getFormValues, reduxForm } from 'redux-form';
import compose from 'recompose/compose';
impor
浏览 0提问于2018-04-01得票数 0
我一直在尝试将Redux Action和Reducer连接到我的组件。但它似乎不能正常工作。 目前，当我调用我的Action时，它确实到达了那个Action，但它不会移动到我的reducer上。我想我在这里遗漏了一些东西，但很难找出问题所在。 有人能帮我解决这个问题吗？ 谢谢。 以下是我的操作： export const getItem = () => {
return (dispatch, getState) => {
debugger;
dispatch({
type: 'API_REQUEST',
options:
浏览 18提问于2018-12-27得票数 0
2回答
我知道这个问题被问了很多次，但没有一个答案对我有效。我得到了组件，它的工作是显示用户数据从react-redux，但userData可以存储在localStorage和网站的第一次加载这个localStorage被获取到redux状态，所以我得到了错误的地方，我想要显示当前登录的用户的首字母。在向mapStateToProps函数添加async/await之后，localStorage会被获取，但我仍然收到错误提示'Cannot get 0 of undefined'，使用带有预置首字母的useEffect也会给出错误。下面是我当前的代码： import React, { u
浏览 21提问于2021-03-14得票数 0
1回答
我有一些反应组件，需要获取某些项目来显示。除了一个非常简单的componentDidMount回调之外，这些组件可以是功能性组件。有一个好的设计模式可以让我回到功能性组件吗？
class Things extends React.Component {
componentDidMount() {
this.props.fetchThings()
}
render() {
things = this.props.things
...
}
}
我正在使用react，我还使用connect将组件连接到我的还原器和操作。这是那个文件：
import { co
浏览 1提问于2017-04-04得票数 0
回答已采纳
2回答
在组件中获取状态时，我遇到了异步问题。当我在mapStateToProps中进行控制台登录时，它显示得很好，但是当我在我的渲染中进行控制台登录时...它是以旧状态出现的。如何在redux中链接函数？
import React, { Component } from 'react';
import Routes from './Routes'
import HomePage from './HomePage'
import {connect} from 'react-redux'
import { bindActionCreator
浏览 0提问于2018-05-08得票数 0
类扩展值#不是构造函数或空
当尝试继承与react redux“连接”->绑定的父类时，会出现错误。
Redux
const mapStateToProps=(state)=>({
.....
});
const mapDispatchToProps=(dispatch)=>{
return {
paymentOver:()=>dispatch(paymentClose()),
}
}
export {
mapStateToProps,mapDispatchToProps
}
父类
import { co
浏览 1提问于2021-02-12得票数 0
回答已采纳
我试图让redux在我的反应-本地应用程序中工作。基本上，我在我的signIn文件中定义了一个authActions.js操作：
const signInAction = () => {
return {
type: 'signIn',
};
};
export { signInAction };
然后，我在authReducer中定义了一个authReducer.js：
const initialState = {
isAuthenticated: false,
}
const authReducer = (state =
浏览 1提问于2018-10-13得票数 1
回答已采纳
我正在写一个库，为我们公司的React应用程序提供一些基本的高阶组件。要点是HOC将从我们的redux状态中拉出一些切换，并有条件地渲染组件或注入道具(取决于所使用的HOC)。 只有在HOC中使用connect函数时，才会出现Error: Invalid hook call.错误。它们可以无错误地返回/呈现作为参数提供的React组件。我最初认为这可能是因为React的版本不匹配或重复的React版本，但由于它可以很好地呈现/返回React组件，我认为这与尝试连接到redux有关。 我已经确认在redux状态obj中有一个切换键，库正在拉入react-redux ( connect函数不是未
浏览 60提问于2021-07-02得票数 0
1回答
我希望使用redux reselect库来编写redux选择器。在文档中，有 描述了如何编写可供多个组件实例使用的选择器。
import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'
import { makeGetVisibleTodos } from '../selectors'
const makeMapStateToProps = ()
浏览 3提问于2020-11-02得票数 0
回答已采纳
我有以下容器：
// @flow
import { connect } from 'react-redux';
import { authLogin } from '../../redux/actions/authentication';
import UserAuthenticator from './UserAuthenticator';
function mapStateToProps({ authentication }) {
return {
validSession: authentication.validSessi
浏览 5提问于2017-06-14得票数 1
这是我在redux-thunk和类组件中使用的基本模式。下面的代码导出一个类定义MyClass，该类定义与mapStateToProps引入的状态正确连接，并有权访问在mapDispatchToProps中定义的操作。
import React from 'react';
import { ThunkDispatch } from 'redux-thunk';
type OwnProps = ... // whatever
const mapStateToProps = (state: RootState, ownProps: OwnProps) =>
浏览 11提问于2022-09-21得票数 0
我是React-Native和Redux的新手，我想弄清楚Redux实际上是如何工作的。
我的目标是从db获取数据(假设当前登录用户正在关注的帐户)，并能够在特定的屏幕上显示这些数据。
我已经成功地做到了这一点，设置了action、reducer和所有的东西，但我不理解的是如何在组件中实际显示它。
我使用mapStateToProps从存储中获取数据，并将userFollowedAccounts设置为store.accountState.userFollowedAccounts。我不明白的是，我是否还必须将该userFollowedAccounts传递到我的函数组件中的useState中才能使
浏览 1提问于2021-07-23得票数 0
1回答
我在我的应用程序中有三个选项卡，我经常从每个选项卡中获取值，并在第三个tab.The应用程序中保存数据，如果导航顺序没有改变，它可以正常工作。(即)表1->表2->表3。
但是当我从表3->表2->表3导航时，来自.The的Tab1值将为null。类似地，当我从Tab3->tab1->Tab3导航时，来自.The的Tab2值将获得null。
Reducer.js
const initialState = {
external: [],
internal: [],
usercode:'',
vehicleImage:'',
ch
浏览 2提问于2019-06-06得票数 1
回答已采纳
1回答
我试图从redux发出一个api请求，然后获取该数据并将其置于我的反应状态(arrdata)中。api调用可以工作，但我似乎无法让我的app.js上的状态基于redux调用进行更新。我是不是遗漏了什么？
App.js
class App extends Component {
constructor(props) {
super(props);
this.state = {
arrdata: []
};
}
componentDidMount() {
this.props.loadData();
console.log(this.
浏览 2提问于2019-11-22得票数 2
回答已采纳
我正在尝试了解React和Redux是如何工作的，我正在研究来自的FuelSavingsPage.js。我知道actions在mapDispatchToProps中是从哪里来的，但我不明白state是如何传递给mapStateToProps的，或者dispatch是如何传递给mapDispatchToProps的。这是怎么发生的？
import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 're
浏览 8提问于2016-08-20得票数 5
回答已采纳
我试图让redux在我的应用程序中工作，但我在将状态更改传递给连接的组件时遇到了问题。mapStateToProps函数仅在初始化时被调用，并且不会再次被调用。 我已经通读了Troubleshooting页面和无数关于论坛和github问题的帖子。我已经100%确保我不是变异状态。我已经应用了中间件来比较操作被分派之前和之后的状态，以帮助验证至少有一个新的引用。 下面是用于确保分派操作创建新的存储引用的基本中间件 //Store Maker code to apply middleware
const logger = (store) => (next) => (action)
浏览 24提问于2019-06-29得票数 1
回答已采纳
我最近刚刚开始使用Redux，我设法使用以下代码将我的<App />组件连接到商店： const mapStateToProps = state => ({
...state,
});
const mapDispatchToProps = dispatch => ({
writeSomething: () => dispatch(writeSomething),
});
export default connect(mapStateToProps, mapDispatchToProps)(App); 这很简单，当我按下一个按钮时，writeS
浏览 22提问于2020-01-19得票数 0
在使用React和Redux时，我遇到了这个有趣的观察。
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {fetchBooks} from '../actions'
class Sample extends Component {
componentDidMount() {
/* Fetching f
浏览 0提问于2019-06-25得票数 1
这是我连接到RegisterUser redux的方式，我想连接到另一个redux
RegisterUser将数据发送到第二个redux中的api我想从api获取任务，但当我尝试连接另一个redux时，它给我这个错误。
连接组件时mapstatetoprops参数的类型object值无效
const mapStateToProps = state => {
return {
errorid: state.RegisterR.errorid,
loading: state.RegisterR.loading,
registersucsess:state.Regist
浏览 0提问于2019-03-05得票数 0
在我的应用程序中，我将redux部分从react组件中分离出来。现在我搞不懂该把withRouter()放在哪里了。它在组件和容器上都有效，但是什么是好的实践呢？ 这是我的代码。 import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import {bindActionCreators} from 'redux';
import RegisterScreen from './RegisterScreen';
浏览 8提问于2019-01-26得票数 0
到目前为止，我见过的唯一示例是父数据包装器，它获取数据并将其传递给子数据。我正在使用Redux，并计划通过“connect”分发数据。仅仅为了纯粹的抓取而创建一个react无状态组件是不是一个糟糕的代码？ 示例： const jsx = (
<Provider store={store}>
<App/>
<FetchingData >
</Provider>
); export const FetchingData = props => {
useEffect(()=>Listening to datab
浏览 11提问于2019-05-23得票数 0
回答已采纳
我有一个父组件Course，它能够从redux获得状态，并且我能够成功地登录：
import React, { Component } from "react";
import { connect } from "react-redux";
import SchoolWrapper from "../SchoolWrapper";
export class Course extends Component {
constructor(props) {
super(props);
console.log("Props
浏览 3提问于2021-12-12得票数 1
回答已采纳
2回答
我想弄清楚，Redux和Axios是如何一起工作的，但我只是碰壁了，我需要一些帮助.我的问题是，在操作中有一个调度，但是在我返回调度后，它不再继续。这很可能是我不明白这是如何工作，所以请尽量解释在尽可能多的细节。提前谢谢。
我的combineReducer
import {combineReducers} from "redux";
import getAvailableDatesReducer from "./getAvailableDatesReducer";
export default combineReducers({
availableD
浏览 6提问于2021-04-27得票数 0
1回答
我试着用redux和react。mapStateToProps不被调用。
调度调用正常工作，操作到达还原器，返回newState并修改存储状态。但是没有调用mapStateToProps，组件也没有重命名。
class Wrapper extends React.Component {
updateChartData (data) => {
...logic...
this.props.actions.chartDataAction(modifiedData);
}
}
function mapStateToProps(sta
浏览 0提问于2018-01-22得票数 0
回答已采纳
1回答
我正在尝试在这里设置存储，我在浏览器中有错误消息：
错误:无法在“连接(卡片)”上下文中找到“存储”。要么将根组件包装在< Provider >中，要么将自定义的React提供程序和相应的React使用者传递给connect中的连接(Card)。
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from "redux";
import reducer from "./Store/reducer&
浏览 0提问于2020-05-05得票数 1
回答已采纳
我试图在React Hook中触发一个动作并更新Redux reducer，但它不像类组件中的componentDidMount那样工作。
在课堂上，它是有效的：
async componentDidMount () {
await this.props.fetchCart(this.props.cartItems,this.props.token,this.props.isAuthenticated)
//it works
console.log(JSON.stringify(this.props.ProductsOfCart) );
}
const mapStateT
浏览 0提问于2021-04-04得票数 0
我在我的项目中使用了react-router-redux push，但不确定我的团队为什么要在actionsToProps中使用它。有什么特别的好处吗？
在actionsToProps中推送工作正常
import {push} from 'react-router-redux';
const actionsToProps = {
registerUser: actions.registerUser,
push
}
export default connect(mapStateToProps, actionsToProps)(Register)
浏览 1提问于2018-01-25得票数 1
比方说，我们有一个与Redux相连的简单的React组件：
const MyComponent = ({ name }) => <p>{name}</p>
// PropTypes definition - we'll back to that in a moment...
const mapStateToProps = state => ({
name: state.name,
});
export default connect(mapStateToProps)(MyComponent);
这里有一个问题--在将defaultProps
浏览 1提问于2019-02-20得票数 0
回答已采纳
我有一个封装在react-redux "connect“中的组件。组件的所有属性都是由mapStateToProps和MapDispatchToProps提供的，因此没有传递给组件的"ownProps“。
但是，我得到以下流错误：
Cannot create Credits element because props [1] is incompatible with empty [2].
src/components/ChildrenView/index.js
323│ />
324│
325│ {
浏览 0提问于2018-05-08得票数 5
3回答
这是问题的一个标签。与这个问题形成对比的是，我不需要我的演示部分成为一个类。有没有一种不使用类和相应的超级()方法来检索Redux存储的方法？
container.js
function mapStateToProps(state) {
return {
a: state.a
};
}
function mapDispatchToProps(dispatch) {
return {
setA: a => dispatch(setA(a)),
};
}
export default connect(
mapStateToProps,
mapDis
浏览 0提问于2018-06-11得票数 0
回答已采纳
如何将此mapStateToProps代码替换为挂接useSelector？我以前从来没有和redux一起工作过，现在我很难理解它。
interface BasicProductMarksListOwnProps {
productMarks: MarkResult[];
}
interface BasicProductMarksListStore {
productMarksState: AdditionalFilterState;
}
interface BasicProductMarksListActions {
onProductMarkChange: (produc
浏览 9提问于2022-07-19得票数 0
回答已采纳
还在和useEffect搏斗。
我阅读了一些东西，并认为我在最后掌握了依赖项数组，但显然不是。
比如说，我有一个：
const StructRequestable = ({ struct, state, requestDataMap }) => {
useEffect(
() => {
console.log("Redux state is", state);
},
[state]
);
return (
<div> Soggy pasta</div>
)}
...
const mapS
浏览 2提问于2020-01-25得票数 0
回答已采纳
只有当环境变量USE_MOCK_PROPS设置为false时，我才尝试使用Redux加载组件。如果是true，那么我将不使用Redux来呈现组件，而是使用一些模拟道具。
import React from "react";
import Page from "./page";
import { connect } from "react-redux";
const { USE_MOCK_PROPS } = process.env;
const mockProps = {
foo: 'bar'
}
export defau
浏览 1提问于2019-08-17得票数 1
回答已采纳
2回答
我在这里试图做的是从redux存储中获取数据，并在Options对象中使用它。我不知道如何用redux中的数据填充选项obj的部分内容。在redux-logger中，我看到一切正常，数据存储在redux状态。我认为问题可能在于访问Options对象中的道具，但不知道如何传递这些道具。高图表用于数据显示。
this.props.myValue从mapStateToProps访问数据是否只在连接到redux存储的react组件中工作？
import React from 'react'
import { connect } from 'react-redux'
im
浏览 3提问于2019-12-31得票数 0
回答已采纳
我有以下例子：
import * as React from "react";
import { connect } from 'react-redux';
interface IMessage {
message : string;
}
class SayMessage extends React.Component<IMessage, {}>{
render () {
return (<div>{this.props.message}</div>);
}
}
functio
浏览 6提问于2016-07-20得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
