javascript - React - Redux 在渲染组件之前等待获取结果
问题描述
我有一些 react-redux 项目。我有一些组件,我不想列出来自 api 的一些数据。只是我在componentDidMount方法中从我的组件调度操作,该方法获取数据。
当我刷新页面时,我将 console.log 设置为我的 redux 状态。
组件渲染得很好,但是当我查看控制台时,我的 console.log 显示我的状态为空,然后正常显示我的状态。在这个过程中,我的组件给我一个错误,我不想在页面上显示的数据是未定义的.
所以这是因为我理解的 fetch 方法异步工作,但是当我的 redux 状态将从 api 获取数据然后渲染组件时需要做什么?
这是我的行动:
export const FETCH_DATA_START = 'FETCH_DATA_START'
export const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS'
export const FETCH_DATA_FAILED = 'FETCH_DATA_FAILED'
export const getData = () => {
return (dispatch) => {
dispatch({
type: FETCH_DATA_START
})
fetch("http://api.com", {
credentials: "include",
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
})
.then(res => res.json())
.then((res) => {
dispatch({
type: FETCH_DATA_SUCCESS,
payload: res
})
})
.catch((err) => {
console.log(err)
dispatch({
type: FETCH_DATA_FAILED,
payload: 'error'
})
})
}
}
这是我的减速器:
import { FETCH_DATA_START, FETCH_DATA_SUCCESS, FETCH_DATA_FAILED } from 'store/actions/getData'
let initialState = []
export default (state = initialState, action) => {
switch (action.type) {
case FETCH_DATA_START:
return [...state]
case FETCH_DATA_SUCCESS:
return [...state, ...action.payload]
case FETCH_DATA_FAILED:
return [state]
default:
return state
}
}
在我的组件中:
import React, {Component} from 'react'
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux'
import {getData} from 'store/actions/getData'
class Ops extends Component {
componentDidMount() {
this.props.getData()
}
render() {
console.log(this.props.dataOps)
return(
<div></div>
)
}
}
const mapStateToProps = state => ({dataOps: state.dataOps})
function mapDispatchToProps(dispatch) {
return {
getData: bindActionCreators(getData, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Ops)
解决方案
选项1
使用前检查减速机状态
选项 2
async componentDidMount(){
//set loader true
await this.props.getData;
//set loader false
}
推荐阅读
- google-apps-script - Google Data Studio 社区连接器和应用程序脚本限制(30 个同时执行)
- swift - VNRecognizeTextRequest 在 iOS 15 中停止识别文本
- javascript - 更新 React Flow 选择和悬停状态
- azure-application-insights - Azure Kusto Query:重新排序条形图
- html - 浏览器如何在第一页加载时表现/处理相同的文件名请求?
- c# - 使用 Sql Server 发布 Windows 窗体应用程序
- javascript - 角度表,表选项
- java - 尽管所有测试都通过了,但 Main 方法不运行程序
- java - 将行与可能存在或不存在于 2 个 Excel 工作表中的多个键进行比较
- .htaccess - 为什么我的重写规则没有添加尾部斜杠?