React + redux，组件通过redux-thunk获取数据并订阅它，但属性在更改时不会更新
React是一个用于构建用户界面的JavaScript库，而Redux是一个用于管理应用程序状态的JavaScript库。在React中使用Redux可以帮助我们更好地组织和管理应用程序的状态。
在React中，组件通过redux-thunk获取数据并订阅它，但属性在更改时不会更新的问题可能是由于以下几个原因导致的：
- 组件未正确连接到Redux的store：在使用Redux时，组件需要通过connect函数将自身连接到Redux的store，以便能够访问store中的状态和操作。确保组件已正确连接到store。
- 组件未正确订阅状态的更改：在组件中使用redux-thunk获取数据后，需要使用Redux的connect函数将组件连接到store，并使用mapStateToProps函数将需要的状态映射到组件的属性上。这样，当状态发生更改时，组件会自动更新。
- 组件未正确更新属性：在React中，组件的属性（props）是只读的，当属性发生更改时，组件不会自动更新。如果需要在属性更改时更新组件，可以在组件的生命周期方法componentDidUpdate中进行处理，比较前后属性的变化并执行相应的操作。
综上所述，要解决组件通过redux-thunk获取数据并订阅它，但属性在更改时不会更新的问题，需要确保组件正确连接到Redux的store，正确订阅状态的更改，并在需要时手动更新组件的属性。
对于React和Redux的更多详细信息，您可以参考腾讯云的相关文档和教程：
- React官方文档：https://reactjs.org/
- Redux官方文档：https://redux.js.org/
- 腾讯云React产品介绍：https://cloud.tencent.com/product/react
- 腾讯云Redux产品介绍：https://cloud.tencent.com/product/redux
相关·内容
1回答
如何将react-redux项目导出为node_module
javascript、reactjs、redux
我正在尝试将一个redux项目导出为具有如下所示index.js的node_module (简化)： import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware';
import App from './App.jsx';
const middlewares = [thunk.withExtraArgum
浏览 13提问于2019-03-13得票数 0
1回答
redux，redux-thunk和理论上的重新渲染UI
reactjs、redux、react-redux、redux-thunk
我在我的项目中使用redux，redux-thunk和react，这不是实际的代码，而是代码的简化版本，所以可能有一些语法错误，但问题是它应该如何工作。
我使用了react-redux connect的react包装器。
在我的操作中，我使用redux-thunk如下：
return function (dispatch, state) {
dispatch(oneAction);
dispatch(secondAction);
dispatch(thirdAction);
}
UI只在thirdAction之后呈现，这很好，但是我不知道是什么告诉系统现在呈
浏览 0提问于2017-07-12得票数 0
1回答
每次当我的redux状态更新时，我的整个页面都在加载。不完全是从服务器加载资源，但是
reactjs、redux、react-redux
每次当我的redux状态更新时，我的整个页面都在加载。不完全是从服务器加载资源，而是刷新页面内部的组件？
以下是我的商店代码。
import { createStore, combineReducers, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import logger from "redux-logger";
import { User } from "./User";
import { Restaraunt } from "./
浏览 2提问于2020-06-15得票数 1
1回答
从非响应文件发送操作时，Redux状态不更新。
reactjs、redux、react-redux
我正在实现react引导表-next，并需要获得单击的标头列值以发送到数据库，以便在服务器端对其进行排序。我想将单击的列名传递给redux商店。我可以让值点击登录操作，但是我的状态不会在redux中更新。
import { createStore } from 'redux';
import reducer from '../../reducers/index';
const initialState = window.__INITIAL_STATE__; // eslint-disable-line
const store = createStore(red
浏览 1提问于2018-03-24得票数 0
1回答
为什么要反应显示组件更新，而不是控制台？
javascript、reactjs、redux、react-redux
我创建了一个简单的redux应用程序。在工具中，我检查“高亮更新”。然后单击任意按钮，显示所有组件都已更新，但"AddButton“中的控制台消息没有显示任何内容。错误控制台，反动开发工具还是我？
// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import { createStore } fro
浏览 1提问于2019-02-22得票数 1
回答已采纳
1回答
当上下文被更改时，使用上下文的子组件不应该自动更新自己吗？
javascript、reactjs、redux、react-redux
我正在尝试创建一个本地化解决方案。
为了测试目的，我有以下结构
index.js
import { Provider } from 'react-redux';
import store from './store'; //This is a redux store
import LocalizedComponent from './components/containers/HomeContainer';
function App() {
return (
<Provider store={store}>
浏览 2提问于2017-03-27得票数 0
回答已采纳
5回答
redux，react-redux，redux-thunk有什么区别？
javascript、reactjs、redux、reactjs-flux、react-redux
我正在使用React + Flux。我们的团队正计划从flux迁移到redux。来自flux世界的Redux让我非常困惑。在中，流量控制流程很简单，来自Components -> actions -> Store store updates back components。这很简单，也很清楚。
但在redux中它是令人困惑的。这里没有store，是的，有一些没有使用store的例子。我看了几个教程，似乎每个人都有自己的实现风格。有些人在使用容器，有些人没有。(我不知道这个容器的概念，也不能理解mapStateToProps、mapDispatchToProps是做什么的)。
有人
浏览 76提问于2016-07-16得票数 85
回答已采纳
2回答
Redux异步函数结构？
javascript、redux
我正在尝试找出为什么我无法从redux-thunk接收到本应传递的dispatch()函数。我尝试了几个不同的编码教程，但似乎都不适合我，但我确实注意到有几种不同类型的实现。
所以我的问题很简单，为redux-thunk编写异步函数以确保调度被调用的整体正确方法是什么？
注意:我可以调用操作创建者，但错误: 1)调度不是操作2)操作需要是纯对象
我对我所要求的是redux异步操作的理解。
const getAttributes= () => {
return (dispatch) => {
return (/* Some async stuff */);
}
}
浏览 0提问于2018-04-30得票数 0
1回答
警告:propType失败：“`SignUp`”中未指定必需的支柱` `emailExists`‘
reactjs、redux、react-router、react-redux、react-router-redux
收到了以下警告：
警告:失败的propType:在SignUp中没有指定必需的支柱emailExists
警告:失败的propType:在SignUp中没有指定必需的支柱onEmailChange
组件/SignUp.js中没有指定emailExists支柱和onEmailChange支柱。我想mapStateToProps和mapDispatchToProps在containers/SignUp.js中传递到connect()中，并不是因为配置错误而将道具注入组件/SignUp.js。
index.js：
import React from 'react'
impor
浏览 3提问于2016-08-22得票数 1
回答已采纳
4回答
状态未使用react redux thunk更新
javascript、reactjs、redux、react-redux、redux-thunk
我对使用redux和react还是个新手。我试着用redux做一个简单的API调用，并让它在react中渲染。我可以看到API调用在redux dev工具的有效负载中工作，但我似乎无法让它更新可能在` `connect?中的状态。
actions/index
import FilmAPI from '../api/api';
export const FETCH_FILMS = 'FETCH_FILMS';
export const RECEIVE_FILMS = 'RECEIVE_FILMS';
export const receiveFi
浏览 0提问于2018-02-20得票数 1
1回答
redux getState()不返回更新后的状态
javascript、reactjs、react-native、redux、getstate
让我困了几天的问题是，虽然我的redux devtool显示了成功的状态更新，没有任何类型的变化，并且成功地重新呈现了视图组件，但是当我调用getState()时，它总是返回初始状态，而不关心更新的状态！任何人谁知道什么可以造成这种情况，请帮助我。
我使用react-redux和redux-thunk
action.js
export function test(data) {
return {
type: 'TEST',
data
};
}
export function testFunc(data) {
return dispatch =>
浏览 4提问于2018-04-18得票数 9
回答已采纳
2回答
我怎么能等到reducer存储分配完成？
react-native、react-redux、redux-thunk
我使用react-native和redux和redux-thunk。基本上，我有一个连接到store的Component，它用dispatch修改其中的一些信息。尽管每个操作似乎都是同步的，但我在修改后的下一行上获得了旧数据。
//reducer
import {assign as _assign} from 'lodash-es';
let initialState = {name: '1'};
export default (state = initialState, action) => {
switch (action.type) {
浏览 0提问于2017-09-26得票数 1
2回答
JestJS ->不变违规:无法在“连接(Portfolio)”的上下文或道具中找到“存储”
reactjs、redux、react-redux、jestjs、enzyme
完整的错误消息：
不变违规:无法在“连接(组合)”的上下文或道具中找到“存储”。或者将根组件包装在一个，或者显式地传递"store“作为"Connect(Portfolio)”的支柱。
不知道为什么在我的Jest测试中会出现这个错误，因为我的应用程序正在工作，我可以通过调度操作来改变我的状态。
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, applyMiddleware, compose } from &#
浏览 3提问于2017-06-28得票数 9
回答已采纳
2回答
ReactJs Redux数据获取
javascript、reactjs、react-native、redux
我刚开始研究反应Js和Redux。目前，我正在尝试使用redux-thunk从url中获取数据。我成功地获得了数据，但问题是它两次呈现undefined数据，然后在道具中给出所需的数据。这是我的密码。
在行动中index.js
function getData() {
return {
type: 'FETCH'
}
}
function getSuccess(data) {
return {
type: 'FETCH_SUCCESS',
payload: data
}
}
function getFailed(err) {
浏览 0提问于2018-08-19得票数 1
回答已采纳
1回答
Redux Firestore onSnapshot
reactjs、firebase、redux、google-cloud-firestore
因此，我目前正在关注一个教程，其中作者正在使用redux在实时数据库的帮助下实时更新数据。在redux文件中，他使用.on方法，如下所示：
const watchPersonData = () => {
return function(dispatch) {
firebase.database().ref("person").on("value", function(snapshot) {
var personData = snapshot.val();
var actionSetPersonData = se
浏览 3提问于2018-10-22得票数 0
1回答
不能调用reactReduxFirebase() - TypeError: Object不是函数
redux、react-redux、redux-thunk、react-redux-firebase、redux-firestore
我使用redux-thunk作为中间件，并试图连接到redux-firestore。当我运行应用程序时，我得到的是错误"TypeError: Object(.)不是createStore上的“。
import reportWebVitals from './reportWebVitals';
import {createStore,applyMiddleware,compose} from 'redux';
import rootReducer from './store/reducers/rootReducer';
import {Pr
浏览 8提问于2021-03-08得票数 0
回答已采纳
1回答
在何处执行更新操作在React +中？
reactjs、redux、react-redux
假设我有一个音乐组件连接到redux商店中的"play“道具。
当"play“被更新时，我想相应地更新播放状态(播放、暂停等)。但是，这并不影响组件的外观。所以我想知道在哪里执行更新操作？
当道具更新时，我使用componentWillReceiveProps来控制回放，但是根据React的说法，这显然是不正确的使用，并且这个方法将被废弃。
浏览 0提问于2018-10-23得票数 0
回答已采纳
2回答
如何在react.js应用程序中集成redux？
reactjs、redux、react-hooks、react-redux
当我试图使用函数代码应用redux_react时，.subscribe()遇到了一个问题，它多次运行每个状态update =(计算所有以前的更新+ 1)，如何只重新呈现UI一次。每一次状态更新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta nam
浏览 2提问于2022-07-28得票数 0
回答已采纳
1回答
配置keycloak的IDP与腾讯云进行联合身份认证，SAML断言返回给腾讯云时报错，但没有明确的错误信息，无法定位原因
ps：阿里云、华为企业云提供了元数据文件直接导入IDP即可，但腾讯云未提供，如何确认IDP的配置正确？
浏览 380提问于2019-02-22
1回答
如何使用Redux在异步动作分派后检索状态数据？
javascript、asynchronous、reactjs、ecmascript-6、redux
我刚开始使用Redux和Thunk，我需要一些帮助，这对我来说是一个非常混乱的概念。我已经学习了多个教程和视频，并设法使用Thunk中间件获得了一个可以工作的异步操作。我基本上是从服务器获取JSON数据，并相应地更新状态以进行启动、接收和错误操作(参见下面的代码)。我遇到的问题是，当我与我的Thunk动作创建者一起执行store.dispatch(fetchAllBugData())方法时，我可以从Logger中间件中看到它正在工作--它首先通过启动操作设置fetching: true，然后一旦它有了数据，我就可以看到fetching: false，并且我的bug数组中填充了我的所有数据。太好
浏览 1提问于2016-07-30得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
