React+Redux值未定义的mapStateToProps
React和Redux是两个流行的JavaScript库，用于构建用户界面和管理应用状态。mapStateToProps是一个函数，用于将Redux的state映射到React组件的props上。
在使用React和Redux开发应用时，可能会遇到"React+Redux值未定义的mapStateToProps"的问题。这通常是由于以下几种原因导致的：
- 引入错误：检查代码中是否正确引入了React和Redux相关的库文件。
- 组件未连接到Redux的store：确保组件通过Redux的connect函数连接到了Redux的store，以便可以访问到Redux的state。
- mapStateToProps函数错误：检查mapStateToProps函数是否正确编写，确保返回的对象中包含需要的state属性。
解决这个问题的方法可以包括：
- 检查代码：仔细检查代码中是否存在拼写错误、语法错误或其他错误。
- 确认连接：确认组件通过Redux的connect函数连接到了Redux的store，确保正确传递了mapStateToProps函数作为参数。
- 检查state属性：检查mapStateToProps函数返回的对象中是否包含了正确的state属性。
- 调试工具：使用浏览器的开发者工具或Redux DevTools进行调试，查看Redux的state是否正确地传递给了组件的props。
总结： React+Redux值未定义的mapStateToProps问题通常是由于引入错误、未正确连接到Redux的store或mapStateToProps函数错误等原因导致的。通过仔细检查代码、确认连接、检查state属性以及使用调试工具可以解决这个问题。
（注意：由于要求不提及特定的云计算品牌商，这里不会提供腾讯云相关产品和产品介绍链接地址。）
相关·内容
我正在使用react+redux与react引导组件。我想将FormControl文本元素(email)的值传递给发送的redux操作，但我不知道如何做到这一点。
class LoginForm extends React.Component {
render() {
const email = React.findDOMNode(this.refs.email);
return (
<div>
<Form horizontal>
&
浏览 2提问于2016-12-08得票数 2
回答已采纳
4回答
我仍然掌握着react+redux和ES6的诀窍。我正在尝试实现i18n，我遇到了一个问题，就是必须用redux的连接导出i18n翻译。
export default connect(mapStateToProps, matchDispatchToProps)(UserList);
export default translate("translations")(UserList);
浏览 0提问于2018-10-17得票数 0
回答已采纳
我正在寻找关于在mapStateToProps中处理错误的最健壮和最可靠的方法的建议，以及在React+Redux应用程序中尝试这种级别的建议是否明智。
例如，如果我将react-redux的connect与组件和mapStateToProps一起使用
function mapStateToProps(state, ownProps) {
throw Error('Some unfortunate error.');
return {
// some data
}
}
我想捕捉这个错误，也许会在呈现组件的位置显示一个错误组件。我不会做任何
浏览 0提问于2016-11-17得票数 5
如果是复制的话请原谅。
我刚刚通过了一些很好的Open source React+Redux projects，我通过了这个，在这个中，他们试图直接从存储中获取几乎每个组件中的数据。
例子-
const Inner = ({
isInsertMode,
insertMode
}: {
isInsertMode: boolean,
insertMode: Function
}) => (
<Button
icon={<ContentAdd />}
description="Add things"
active={
浏览 6提问于2017-05-30得票数 2
回答已采纳
1回答
将转换为类型记录？
、、、、
我正在尝试将React+Redux组件的示例复制到类型记录：
我碰到了这个功能的死胡同：
导出默认连接(mapStateToProps，mapDispatchToProps)(ItemList)；
我收到了一个错误，关于它如何不能映射到ItemList。
我认为有一种方法是将类声明更改为：
class ItemList extends React.Component<{proper component map}, {proper state map}> {
然而，如果我这样做，因为道具现在已经被映射，我不能简单地包括ItemList作为和现在期望提供对角。
另一种选择可能是
浏览 1提问于2017-09-13得票数 3
回答已采纳
5回答
我仍然掌握着react+redux和ES6的诀窍。我正在尝试实现socketio，我遇到了不得不用redux的连接导出socketio连接的问题。
redux连接
export default connect(mapStateToProps, matchDispatchToProps)(UserList);
套接字连接
export default socketConnect(App);
问题，使它们一起工作的正确语法是什么？
浏览 10提问于2017-06-28得票数 25
回答已采纳
我刚开始学习React+Redux，我遇到了一个问题。我知道我永远不应该改变减速器的旧状态，我不会这样做的。
但是，当我在还原器中更改这样的变量时，即使我有mapStateToProps和state.coupons，组件也不会重新呈现。
// this deep copies everything
let newState = Object.assign({}, state);
newState.coupons[2].events[0].eventRows[0].alternatives[0].selected = true;
return newState;
我做错了什么？
编辑:我甚至
浏览 1提问于2017-05-08得票数 3
我把头撞到墙上了。我已经在React+Redux上顺利运行了一段时间，然后我用Chrome删除了我的localStorage，然后一切都变得混乱不堪。现在我不能让mapStateToProps调用，所以我没有得到任何支持，即使reducers的状态是正确的。
我已经通读了Redux文档中关于mapStateToProps未被调用的故障排除部分，但它似乎主要归结为不会改变您的状态。为了确保我不是，我已经将我的reducer代码减少到几乎为零，以排除可能性。这就是它：
const mapStateToProps = (state, ownProps) => {
return {
浏览 0提问于2018-01-31得票数 2
3回答
我的店：
store={
users: [
{id:1},
{id:2},
{id:3}
]
}
现在，我只想导入一个用户的基础上的路线仿冒。
id = this.props.match.params.user_id;
问题是..。如何在mapStateToProps函数从我的存储区获取数据之前建立上面的id变量？我的mapStateToProps：
return {
singleUser: state.users[id]
};
返回未定义的。我尝试在mapStateToProps中放置变量'id‘，但我认为当它开始获取数据时，参数还没有建立。
编辑
浏览 0提问于2019-04-16得票数 1
回答已采纳
4回答
我试着在我的密码笔里使用React+Redux，但是连接不是注入道具，
也许是因为我是个业余爱好者，我错过了一些东西。请看一下。
const { Component } = React;
const { createStore, bindActionCreators, applyMiddleWare, combineReducers } = Redux;
const { Provider, connect } = ReactRedux;
const Application = () => (
<div className="ground"
浏览 4提问于2016-04-14得票数 8
回答已采纳
我试图呈现从nodejs开始的数据，我使用redux进行状态管理。问题是，当我试图映射数据时，它会给我错误的解释。
未定义的TypeError:无法读取未定义的属性“映射”
这是我的代码/home.js
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {getArticle} from '../../redux/actions/article';
class Home extends Component {
浏览 0提问于2019-08-08得票数 0
回答已采纳
2回答
我正在使用React+Redux。我收到一个错误： ? 调试时，来自服务器的数据进入状态，操作为空： ? 这是我的代码的一部分： class ProfileContainer extends React.Component {
componentDidMount() {
debugger
axios.get('https://social-network.samuraijs.com/api/1.0/profile/3')
.then(response => {
浏览 25提问于2020-08-28得票数 0
1回答
我通常使用以下模式构建组件：
import selectors from '../store/selectors'
import someAction1 from '../actions/someAction1'
import someAction2 from '../actions/someAction2'
import someAction3 from '../actions/someAction3'
class MyComponent extends React.Component {
render() => {
浏览 0提问于2019-01-16得票数 1
回答已采纳
为什么函数mapStateToProps在React/Redux中返回“未定义”或空对象。
我的代码：
import React from 'react'
import {connect} from "react-redux";
export const ArticleComponent = ({props}) => (
<div>
<h1>Hello {console.log(props)}</h1>
</div>
);
const mapStateToProps = (state) =>
浏览 2提问于2018-07-03得票数 0
我试图使用容器中的getFormValues向道具添加表单值。但是，当我在派生组件中查找values属性时，将得到一个未定义的值。我错过了什么？
集装箱代码：
import {reduxForm, getFormValues} from 'redux-form';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as actions from '../actions/propertiesActions';
浏览 0提问于2016-10-05得票数 1
回答已采纳
我想使用从mapStateToProps获得的属性来设置组件的本地状态。当我在ComponentWillMount()方法或ComponentDidMount()方法中使用this.setState时，它是未定义的。
componentWillMount() {
this.props.fetchBooks(this.props.id);
this.setState({
books:this.props.books
})
}
const mapStateToProps = (state, ownProps) => {
let id = ownPr
浏览 0提问于2019-10-03得票数 0
我有以下代码： import React, {Component} from 'react';
import {connect} from "react-redux";
class MemberView extends Component {
render() {
const {users} = this.props;
console.log('users ', users);
const currentUserId = this.props.match.params.id;
浏览 170提问于2021-01-16得票数 0
回答已采纳
我正在看样本在 (最流行的react+redux样板)。最后，有一个按钮调用handleSubmit将数据发送到服务器：
<button className="btn btn-success"
onClick={handleSubmit(() => save(values)...
我搞不懂handleSubmit函数从何而来。我检查了容器，当呈现WidgetForm时，它不会传递它。它是由插件自动注入吗？还是在更高的层次上完成的？我对react+redux很陌生，我迷路了。
浏览 4提问于2016-12-24得票数 0
回答已采纳
我正在用React和Redux，路由器开发应用程序。但是现在我不能将状态设置为'mapStateToProps‘函数的状态。所以减速机的args‘动作’就是‘未定义’。我认为造成这个问题的原因是mapStateToProps的args不是从任何地方传递的。
有人知道如何将状态(来自客户端的数据输入)传递到mapStateToProps函数中吗？
我的mapStateToProps函数就是这样编写的。
const mapStateToProps = state=>{
console.log(state); // this 'state' return undefi
浏览 3提问于2016-12-29得票数 2
回答已采纳
3回答
我尝试用React+Redux从API中获取数据，但由于某些原因，数据无法呈现，即使我在控制台中看到它(使用redux-logger)它看起来像是出于某种原因，reducer没有将areLoading值更改为false -并且数据无法到达页面。但是我不知道我们的错误在哪里，一切似乎都是对的。
组件：
class Posts extends Component {
componentDidMount() {
this.props.postsFetch();
}
render() {
return (
<div
浏览 4提问于2017-01-26得票数 0
1回答
我运行了一个api并获得了对象的json对象。下面是这个物体的截图。在react本机中，我使用键" data“从redux获取组件中的数据。
当我尝试在mapStateToProps组件中获取城市名称时，我将得到以下错误
TypeError:无法读取未定义属性的“名称”
区块报价
我的mapStateToProps在下面。
const mapStateToProp = ({data}) => {
//console.log(data);
return {
city: data.data.city.name
}
}
我得到完整的数据到城市
浏览 1提问于2018-05-09得票数 0
回答已采纳
我的反应和减少有点新，但取得了相当大的进步。我正在使用redux连接映射状态到道具。一直工作得很有魅力，直到我遇到这种情况：
父组件正在使用mapStateToProps，下面是它的源代码：
import React from 'react';
import { connect } from 'react-redux'
import { NestedComponent } from './NestedComponent'
class ParentElement extends React.Component {
render() {
浏览 3提问于2016-12-18得票数 1
回答已采纳
我正在努力获取书的状态，当我记录道具时，我得到了书:未定义。
有小费吗？
import React from 'react';
import { connect } from 'react-redux';
import BookForm from './BookForm';
const EditBook = (props) => {
console.log(props)
return (
<div>
hello
</div>
);
};
const mapStateToPro
浏览 0提问于2018-05-08得票数 0
回答已采纳
我正在以我的方式学习一些react+redux，并且我已经整理了一个简单的表单，它可以访问一个API并检索一些笑话。我的核心组件和代码：
containers/AsyncApp.js
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import {bindActionCreators} from 'redux';
import SearchJokes
浏览 0提问于2018-04-18得票数 0
回答已采纳
2回答
我是反应初学者，试图将类转换为钩子，需要一个建议/帮助如何安全地删除'mapStateToProps‘而不被定义。
我有页面A.js和页面B.js。
组件B.js我已经在这里发布了完整的代码，所以它很容易理解。目前，控制台日志将为我提供一个对象数组。
如果我删除'mapStateToProps‘并设置连接(null，null)(ConnectedList)
然后控制台日志将给我“未定义”。
这是我的A.js，在这里我使用组件B.js：
<React.Fragment>
<h3>
浏览 0提问于2021-10-14得票数 0
回答已采纳
1回答
我是react redux的新手。 我有类似这样的实现： 商店： import { createStore } from "redux";
const initialState = {
layersFlag : {
baseDistrictADhabi: "none",
baseDistrictAAin: "none"
}
};
const reducer = (state = initialState, action)=>{
switch (action.type) {
浏览 9提问于2019-05-16得票数 1
回答已采纳
1回答
我正在使用中间件从indexeddb恢复Redux存储。我希望使用根组件中的数据进行路由，以检查用户是否已连接。但是，connect函数似乎没有将根组件state连接到Redux。
在调试时，我看到mapStateToProps从未实际运行。这是index.js的相关部分：
class AppProvider extends Component {
constructor (props) {
super(props)
this.state = {}
}
componentWillMount () {
persistStore(store, {storage
浏览 3提问于2017-05-15得票数 0
为什么我不能从mapStateToProps访问descriptionList有点奇怪，因为我调用了动作fetchDescription，但我不确定为什么在组件中返回未定义的descriptionList 下面是显示该列表存在的console.log： ? 这是我的组件： 从‘../../actions/actions’导入{ fetchDescription }； const Description = (props) => {
const { descriptionList } = props;
useEffect(() => {
props.fetch
浏览 84提问于2021-01-29得票数 1
回答已采纳
处理React，Redux和Redux-Redux。
订阅正确的存储，但一旦我尝试钻入对象，我就会得到一个‘无法读取属性'x’的未定义。对象中的任何属性都是禁止使用的，因为某些原因使我无法理解。
见守则：
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
class NavList extends Component {
render() {
浏览 2提问于2017-06-27得票数 0
回答已采纳
在我的React+Redux应用程序中，在执行某些类型的操作之后，null的值被(隐式)转换为Infinity，我似乎找不到原因。
有什么可能的微妙的方式可以导致这一点？
浏览 0提问于2018-03-02得票数 0
我在组件中通过Redux获取数据，如下所示：
import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as actionCreators from './../../_actions/actionCreators';
import './Posts.css';
function mapStateToProps(st
浏览 3提问于2017-08-08得票数 0
嗨，我刚开始反应和还原，我有以下问题，将clientName属性添加到mapStateToProps中的提议数组会给我以下错误："TypeError:无法读取未定义的属性‘名称’“，我尝试了很多事情，但我真的找不到解决方案。
const ProposalsPage = ({ proposals, clients, loading, loadProposals,loadClients }) => {
useEffect(() => {
if (proposals.length === 0) {
loadProposals().catch((error)
浏览 0提问于2021-02-22得票数 0
回答已采纳
我正在努力开发一个React-redux应用程序，以便通过状态将值从一个组件传递到另一个组件。我不希望使用reducer和/或dispatch，因为我不是在调用and服务，我只想从文本框窗体中获取一个值，以便在order组件上启用另一个控件。
首先，我可以从控件中获取值，但是当mapstatetoprops被调用时，我设置并希望添加到状态的变量是未定义的。这也可能解释了为什么我的另一个问题。在我的另一个组件上，使用props的函数从未被调用过，因为状态组件
下面是相关的代码片段：
<ListItemContent>
<Control component={Textfi
浏览 28提问于2017-03-17得票数 0
我正在为我的应用程序使用react和redux。我的问题是我收到了2次道具，第一次是未定义的，第二次是好的。所以我不能使用道具。
import ...
class Home extends Component {
//some code logic
render(){
console.log(this.props.header);
const header = this.props.header;
return (
<Welcome title={header.title} />
)
}
}
const
浏览 4提问于2017-03-13得票数 1
1回答
我是包装材料TextField与剩余组件。有些属性应该仅在mapStateToProps中使用，而不是传递给组件本身。否则，我会收到Unknown prop警告。指定未定义的值没有帮助。
function mapStateToProps(state = {}, ownProps) {
var dataKey = ownProps.dataKey;
return {
value: state[dataKey],
dataKey: undefined
}
}
const store = createStore(reducer, {stuff:
浏览 2提问于2016-10-26得票数 3
回答已采纳
1回答
我已经创建了一个网站，这是React+Redux服务器端渲染应用程序，用于加载服务器数据，我在componentWillMount上调度一个动作，但这是一个异步请求，从React+Redux加载数据，它需要2-3秒来响应不幸的是，谷歌内容爬虫没有抓取内容，这是非常必要的。所以我需要一种方法来设置redux初始状态的服务器数据，这样它就可以打开完整内容的web应用程序，但我不知道如何在我的代码中实现这一点。 Store.js import {createStore, combineReducers} from 'redux'
import {GET_CARDS} from &#
浏览 17提问于2019-06-13得票数 2
我在mapStateToProps中遇到了这个问题，它在控制台中显示为未定义。我已将console.log放入app.js中，其中显示loginval为未定义。这只是一个简单的react redux代码。我找不到我的错误。我已经尝试了我所知道的所有关于它的东西，它仍然是不确定的。
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap/dist/css/bootstrap.mi
浏览 2提问于2021-06-17得票数 0
我正在使用Redux模式，并且我有一个功能组件，其中我需要调用redux操作，但我的属性总是未定义
const GetCustomers= (props) => {
useEffect(() => {
//Props is always undefined?
let test = props.actions.getSomething();
});
return (
<>Hello</>
);};
GetCustomers.propTypes = {
actions: PropTypes.object.isRe
浏览 1提问于2020-08-07得票数 0
我正在尝试让url参数决定哪个‘文章’是加载的。 但是，mapStateToProps会首先触发，并导致出现未定义的文章数据。因此，在触发componentDidMount之前抛出一条错误消息(这就是将文章数据加载到状态中的原因)。我已经尝试将分派放在其他地方(比如在render中或在它自己的方法中)，仍然存在相同的问题。 这是我的comonentDidMount： componentDidMount(){
const params = this.props.location.search.split('/');
this.props.dispatch(g
浏览 18提问于2020-07-28得票数 1
回答已采纳
我想将地理位置的天气添加到我的React+Redux应用程序中。我发现我可以通过这个JS方法navigator.geolocation.getCurrentPosition(success, error, [options])获得地理位置。我想把它分派给我的Redux weatherSlice，但是这个方法默认情况下返回未定义的，所以我不能通过createAsyncThunk分派它。 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
export const getGeolocation =
浏览 32提问于2021-08-16得票数 1
回答已采纳
1回答
我实际上正在开发一个小的react应用程序，我实际上想将我的组件连接到firebase，但是这个组件包含多个类和多个导出，所以当我应用我的方法(基于一个类组件)时，它使我什么都没有，它应该从消防局返回数据。
当我尝试在mapStateToProps上记录状态时，它返回未定义的：
const mapStateToProps = (state) => {
console.log("state firebase",state);
return {
animationsfb: state.firestore.ordered.animations,
}
浏览 0提问于2019-07-29得票数 2
回答已采纳
用户名属性未定义。它在currentUser下的credentials下显示状态，所以我不确定为什么会发生这种情况。错误显示在： const {
classes,
currentUser: {
credentials: { username, image },
loading,
authenticated,
},
} = this.props; 完整代码： class messages extends Component {
constructor() {
super();
this.state = {
se
浏览 24提问于2020-07-27得票数 1
回答已采纳
获取reducer中的数据，但无法获取组件中的数据。这是我的连接码。
const mapStateToProps =state => {
return {
name:state.fbLogin.name
}
}
function mapDispatchToProps(dispatch){
return bindActionCreators(ActionCreators,dispatch);
}
export default connect(mapStateToProps,mapDispatchToProps)(Cha
浏览 2提问于2018-06-11得票数 0
我的应用程序使用Redux很长时间了，组件导出如下所示
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
我现在正在介绍i18n的翻译库，并希望使用useTranslation中包含的自组织库。
我尝试了几种不同的方法，并且看到Redux有一个connect功能，如果我正确理解，它应该结合HOCs，但是我无法让它工作。
export default connect(useTranslation(), connect(mapStateToProps, mapDispatchToProps))(MyC
浏览 7提问于2022-02-21得票数 0
回答已采纳
您好，我是新的反应和redux，我试图访问存储从componentDidMount方法，但总是给我未定义，当控制台的状态从mapActionToState第一次给我未定义，然后给我真实的状态 import React, {Component} from 'react'
import {connect} from "react-redux";
class UserProperties extends Component {
constructor(props) {
super(props);
this.state = {
tab
浏览 22提问于2019-03-21得票数 0
2回答
我知道我的问题来自对redux的误解，但我会描述我的用例，希望有人能指出正确的方向。
我试图将选定的行键(selectedRowKeys)存储在redux存储区内的表(ant设计表)中。当商店结构很简单时，一切都可以工作，如下所示：
selectedRowKeys: []
但是，我希望以规范化的形式存储该状态，以处理多个表和多个表属性：
tables: {
123fdfas-234dasf-234asdf-23rfa : { //table id
id: 123fdfas-234dasf-234asdf-23rfa,
selectedRowKesy: []
//...
浏览 3提问于2019-07-10得票数 1
回答已采纳
请允许我处理一个redux项目，但是返回给mapStateToProps的数据没有发送到组件。Console.log道具未定义
LiveEvent.protoTypes = {
event: PropTypes.object.isRequired,
error: PropTypes.string,
};
const mapDispatchToProps = (dispatch) => {
return {
getSingle: (values) => {
console.log(Creators, "creators")
浏览 4提问于2021-05-17得票数 0
回答已采纳
尝试学习反应，但在尝试使用"mapStateToProps“时有问题--它显示错误"TypeError:无法读取未定义的属性‘股票’”
import PropTypes from "prop-types";
class StockList extends Component {
componentDidMount() {
this.props.getStocks();
}
render() {
const { stocks } = this.props.stock;
return (
<Contain
浏览 1提问于2019-01-26得票数 1
回答已采纳
以防我们需要一个深度嵌套的道具，并且每个级别的值都可能是未定义的。换句话说，我们需要检查每个级别的值是否未定义。这样做的好做法是什么，或者完全避免这样做？ 一个简单的两级示例，假设深度为5或6... const mapStateToProps = state => {
return {
formValues: state.form.section1 ?
state.form.section1.input1?
state.form.section1.input1.val
浏览 9提问于2019-03-04得票数 0
回答已采纳
我试图通过将13级传递给我的动作创建者来改变缩放级别。
但是得到这个错误：
错误:给定动作"ZOOM_SELECTED"，还原器“缩放”返回未定义。若要忽略操作，必须显式返回前一状态。如果希望这个还原器不保存值，则可以返回null而不是未定义的值。
您知道如何更改当前状态，将新的缩放级别传递给我的操作创建者吗？
render() {
console.log(this.props.zoom)
return (
<div>
<Map className='map
浏览 0提问于2020-02-06得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
