如何在componentDidMount中使用Redux获取的值
在componentDidMount中使用Redux获取的值，可以通过以下步骤实现：
- 首先，确保你已经安装并配置了Redux相关的依赖包。这包括redux、react-redux和redux-thunk等。
- 在组件文件的顶部，导入所需的Redux相关模块。例如：
import { connect } from 'react-redux';
import { fetchSomeData } from '../actions'; // 假设这是一个用于获取数据的Redux action- 在组件类中，定义一个方法来触发Redux action并获取数据。这个方法可以在componentDidMount生命周期方法中调用。例如：
class MyComponent extends React.Component {
componentDidMount() {
this.props.fetchSomeData(); // 调用Redux action来获取数据
}
// 其他组件代码...
}- 使用connect函数将Redux的状态和action绑定到组件上。这样，你就可以在组件中通过props访问Redux的状态和触发action。例如：
const mapStateToProps = (state) => {
return {
data: state.someData // 假设someData是Redux中存储的数据
};
};
export default connect(mapStateToProps, { fetchSomeData })(MyComponent);- 现在，在componentDidMount方法中，你可以通过props访问Redux中的数据。例如：
componentDidMount() {
this.props.fetchSomeData(); // 调用Redux action来获取数据
console.log(this.props.data); // 访问Redux中的数据
}这样，你就可以在componentDidMount中使用Redux获取的值了。请注意，上述代码中的fetchSomeData和someData是示例，你需要根据你的实际情况进行调整。
对于腾讯云相关产品，可以使用腾讯云的云函数（SCF）来执行Redux action，存储数据可以使用腾讯云的对象存储（COS），数据传输可以使用腾讯云的私有网络（VPC）等。具体的产品介绍和文档可以在腾讯云官网上找到。
相关·内容
1回答
Redux，两个相同的组件，但不同的mapStateToProps
react-redux
我需要两个具有相同功能的组件，但我希望将一个不同的状态属性映射到道具。我如何保持它的干燥(不仅仅是有两个独立的组件，大部分代码是相同的)？下面是其中一个组件的简化版本：
import React, { Component, PropTypes} from 'react';
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';
class MyComponent extends Component{
constructor(props)
浏览 0提问于2018-04-13得票数 2
回答已采纳
2回答
Redux与React使用正确的方法与组件共享存储
reactjs、redux、react-redux
Redux的商店服务最终被React中的各种组件所利用。它公开的方法(如分派、getState和订阅)被各种组件(如容器或表示)所使用。
我认为传递这种商店服务的方法是一个重要的设计决策。我看到了两种方法，它们是：
1)将商店作为支柱传递给所有嵌套级别的每个组件。这不是推荐的。
2)使用像redux这样的工具，在上下文的帮助下，使存储(状态和分派准确地说是可用的)可以在任何需要的地方使用。
我的问题是:为什么不简单地将商店导入到任何需要的地方。对于基于SPA的React，商店将是一个单独的。嵌套在任何级别的组件可以简单地导入存储。我们为何要采用上述两种方法中的任何一种？
对于任何嵌套级别的组件
浏览 0提问于2016-04-15得票数 2
回答已采纳
4回答
Redux- mapStateToProps不工作
javascript、reactjs、redux
我有一个react组件，它在componentWillMount中进行AJAX调用，并对接收到的数据进行备份，以响应redux存储。以下是代码
componentWillMount() {
var self = this;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
console.log(this.responseText);
浏览 0提问于2018-05-25得票数 4
2回答
连接部件的js单元测试. mocha
reactjs、redux、mocha.js、react-redux、enzyme
我有一个智能组件，试图编写单元测试(DOM测试)-获得以下错误:不确定为什么我要得到这个错误，即使我在测试中通过道具。
不变违反：无法在“连接(MyComponent)”的上下文或道具中找到“存储”。或者将根组件包装在一个，或者显式地将“存储”作为“连接(MyComponent)”的支柱。
更新的新错误: TypeError:无法读取未定义的mapStateToProps的属性“mainData”
测试代码：
import React from 'react';
import ReactDOM from 'react-dom';
import TestU
浏览 2提问于2017-01-02得票数 2
1回答
获取项目的反应设计模式
reactjs、react-redux
我有一些反应组件，需要获取某些项目来显示。除了一个非常简单的componentDidMount回调之外，这些组件可以是功能性组件。有一个好的设计模式可以让我回到功能性组件吗？
class Things extends React.Component {
componentDidMount() {
this.props.fetchThings()
}
render() {
things = this.props.things
...
}
}
我正在使用react，我还使用connect将组件连接到我的还原器和操作。这是那个文件：
import { co
浏览 1提问于2017-04-04得票数 0
回答已采纳
1回答
react钩子中用于正确实现isLoading的类似物是什么？
reactjs、redux
然后 import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { userActions } from 'redux/actions/userActions';
class Example extends Component {
componentDidMount() {
this.props.us
浏览 12提问于2020-02-01得票数 0
3回答
如何等待redux准备好必要的数据
javascript、reactjs、redux
我正在为我的多语言应用程序使用react-localize-redux，并使用MySQL来获取数据。我的一个操作需要区域设置数据将其作为参数传递给后端，以便后端使用适当的数据进行响应。但是，当区域设置可用时，操作被调用，应用程序崩溃，我如何解决这个问题？下面是代码： import React, { Component } from 'react'
import RestaurantCard from './RestaurantCard';
import {Row} from 'react-bootstrap';
import { connect
浏览 17提问于2019-04-18得票数 2
回答已采纳
2回答
将文本值传递给另一个组件
reactjs、react-redux
如何使用Redux将文本值传递给另一个组件？
我在学习Redux的反应。我试图使用React中的Redux将文本值传递给另一个组件。
我的代码如下所示
Mycomponent.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
class Mycomponent extends Component {
state = {
textInput: '',
}
handleChange = ev
浏览 1提问于2021-05-09得票数 0
回答已采纳
1回答
如何从react的componentDIdMount()中访问redux-store
reactjs、redux、react-redux、redux-thunk
在下面的代码中，我试图将state.userData.userDetails从redux-store传递给getleftpaneProductCatalogue()，但componentDidMount()无法访问state.userData.userDetails。我尝试将state.userData.userDetails赋值给this.prop.userProfile，但this.prop.userProfile仍然是一个空值。如何在componentDidMount中访问prop
import React,{Component} from 'react';
import
浏览 5提问于2018-08-23得票数 0
回答已采纳
2回答
用react和redux显示json数据
json、reactjs、redux
我试图用redux加载一些本地json数据，并在react应用程序中显示。但我要把pageId is undefined放进减速器里。
我不知道我在这里做错了什么，我认为我传递数据的方式可能有问题，但是我对还原非常陌生，所以我不确定。
数据
const page = [
{"title":"Mollis Condimentum Sem Ridiculus"},
{"title":"Pharetra Tellus Amet Commodo"}
]
export default page;
Action
const get
浏览 2提问于2016-08-26得票数 1
1回答
组件中的空状态(反应还原)
javascript、reactjs、redux
组件中的state有问题。我正试图从我的减速器那里得到状态，但是state是空的，只要得到undefined
这是我的actionCreator
export function checkLogin() {
return function(dispatch){
return sessionApi.authCheck().then(response => {
dispatch(authSuccess(true));
}).catch(error => {
throw(error)
})
}
}
我的减速器
export c
浏览 1提问于2017-02-12得票数 1
回答已采纳
1回答
反应-Redux:如何设置状态？
reactjs、redux、redux-reducers
我试图理解其他人的代码，但很难理解Redux和Redux之间的交互。
在React页面上，我调用一个名为getSubscriptionPlan的Redux操作。在这个Redux操作中，我看到它能够加载正确的数据(在下面的1点)。这使用了一个减速器，在其中我可以再次确认正确的数据在那里(在下面的2点)。
然后逻辑返回到React页面(下面是3点)。现在，我希望能够在Redux存储中找到前面提到的数据。但是，我找不到任何地方列出的数据..。无论是在this.state (我期望的地方)，还是在this.props中。减速机是不是没有更新商店的状态.？
我做错了什么，如何才能让数据指向下面的3？
R
浏览 4提问于2022-03-19得票数 0
回答已采纳
2回答
mapStateToProps打电话来了，但componentDidUpdate没有打电话
javascript、reactjs、redux、react-redux
我从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
1回答
加载侧边栏时预加载器消失
javascript、reactjs、webpack、redux、jsx
例如:我有两个控制视图容器user.cv.jsx和sidebar.cv.jsx
屏幕由用户和边栏组成。用户屏幕中的侧边栏渲染。
用户容器：
import React from 'react'
import {Link} from 'react-router-dom';
import { connect } from 'react-redux';
import UserTypeComponents from '../components/user_type.jsx'
import Sidebar from '../../si
浏览 0提问于2017-11-27得票数 0
1回答
Redux类扩展值#<Object>不是构造函数或null
reactjs、redux、react-redux
类扩展值#不是构造函数或空
当尝试继承与react redux“连接”->绑定的父类时，会出现错误。
Redux
const mapStateToProps=(state)=>({
.....
});
const mapDispatchToProps=(dispatch)=>{
return {
paymentOver:()=>dispatch(paymentClose()),
}
}
export {
mapStateToProps,mapDispatchToProps
}
父类
import { co
浏览 1提问于2021-02-12得票数 0
回答已采纳
2回答
在Redux中使用mapStateToProps
javascript、reactjs、redux
我想找个简单的例子。下面是代码。
在本例中，在：
mapStateToProps = (state) => {}
state从哪里来？我有点困惑，不知道我到底是怎么回事？
我知道connect(mapStateToProps)(TodoApp)“绑定”了在mapStateToProps中返回的状态到TodoApp，然后可以通过this.props访问。
我需要对这段代码做些什么，以便在TodoApp中打印出当前状态
import React from 'react';
import ReactDOM from 'react-dom';
import { P
浏览 2提问于2017-06-25得票数 0
回答已采纳
1回答
使用redux时，axios.get(url).then()中的设置状态不能工作
javascript、reactjs、react-redux、axios
在使用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
2回答
如何判断redux的更改状态的另一个组件？
reactjs、redux、react-redux
我有两个组件reactjs，我创建了一个状态redux来处理这两个组件的状态。
`appcomponent.js
import React, { Component } from 'react';
import { createStore } from 'redux';
import { connect } from 'react-redux';
//reducer
export function get_user(state=[], action) {
switch (action.type) {
case &
浏览 0提问于2017-11-14得票数 0
2回答
如何根据redux数据在公共头部组件中添加类
reactjs、redux、react-redux
在我的react JS应用程序中，我在header组件中添加了一个通知图标。我已经创建了一个单独的组件，我在其中执行api调用以获取数据并显示数据。我在这里尝试实现的是，如果有一些通知警报，则更改标题组件中图标的颜色。我的页眉组件-
import React from "react";
import { connect } from "react-redux";
import {
setPoiData,
getNotification,
updateNotification
} from "../../actions/action";
浏览 11提问于2018-12-11得票数 2
1回答
在react+redux app的Home component中，在component component上调用操作getPosts()后，this.props.posts未定义
javascript、django、reactjs、redux、react-redux
我正在尝试制作一个博客风格的应用程序。我正在运行一个django服务器，并试图创建一个react-redux前端。我正在使用redux-devtools，当我注释掉错误代码时，redux似乎具有状态中的数据。不确定哪里出了问题。此外，我使用redux-thunk和axios与后端通信。我几乎是在抄袭youtube的教程。这是reducer reducers/posts.js
import {GET_POSTS} from "../actions/types";
const initialState = {
posts: []
}
浏览 16提问于2019-07-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
