REact/redux应用程序api调用不起作用:显示为空且aciton未运行问题



大家好,我正在创建一个react原生应用程序,在调用api get请求时遇到了一些问题这就像是给出一些错误的响应似乎像是操作没有运行错误的共享代码下面请如果有人知道这个问题,请让我知道

注意——当我在reducer中运行应用程序控制台并在操作中运行控制台时没有作为运行


控制台中的错误消息Details当我绘制statetoprops并检查reducer的值时,组件中的reducer值显示如下

Object { details: {}, isFetching: false, error: false }
details: Object {  }
<prototype>: Object { … }
error: false
isFetching: false
<prototype>: Object { … }

动作文件

export function fetchdetails(seesionkey) {
return function (dispatch, getState) {
fetch(`api url`, {
method: 'GET',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
seesionkey,
},
body: JSON.stringify({
"appcont": getState().mustdata,
"dataset":{}
}),
})
.then(r => r.json())
.then((rr) => {
console.log('------testinresponse',rr);
if (rr.response.error.errorCode === -4) {
dispatch({
type: 'FETCHFAIL',
payload: ' error  again',
});
} else {
dispatch({
type: 'FETCHSUCCESS',
payload: rr,
});
}
})
}
}

减速器

const initialState = {
details: {},
isFetching: false,
error: false
}
export default function DetailsReducer(state = initialState, action) {
switch(action.type) {
case :FETCHSUCCESS
console.log('action goes here', action)
return {
...state,
isFetching: false,
details: action.payload
}
case FETCHFAIL:
return {
...state,
isFetching: false,
error: true
}
default:
return state
}
}

组件调用


componentDidMount() {
const {seesionkey} = this.props
this.props.dispatch(fetchdetails(seesionkey));
}

模拟api

{   
"appcont":{
"id":"34435654605",
"name":"no data ",
"details":dummy details",
"code":"demo",

},
"dataset":{

}
}

如果没有看到完整的组件定义,我不能100%确定,但在注销之前,您是否检查了详细信息是否为空?当组件第一次装载时,它将为空,直到请求返回——此时将进行第二次渲染。

通常,在组件渲染中,在组件返回之前,您不会渲染任何内容。由您来处理网络请求仍在飞行中的情况:

render() {
if (Object.keys(this.props.details).length === 0) return null
// rest of component
}

在这种情况下使用isFetching可能会更好,但您需要在fetch调用之前执行另一个操作来设置它。

动作甚至没有启动的原因可能是渲染已经爆炸,因为它无法处理空的情况。

另一个问题可能是如果您没有配置https://github.com/reduxjs/redux-thunk在您的商店。你正在使用thunk,所以如果你没有配置它们,你可能会看到你看到的东西。

顺便说一句,您可能希望在componentWillMount而不是componentDidMount中进行调度。Do mount将不必要地等待第一次渲染过程,然后再启动请求。它会稍微快一点。

得到的解决方案数据是空的,因为api请求是get方法并传递一些数据,然后改为post方法,所有操作都很好

我发现你的案例语法是错误的,在减缩开关中应该是这样

case";FETCHSUCCESS":

其次,您必须使用connect扭曲组件,然后从减速器获取状态。

要查看结果,您需要直接与reducer进行数据交互,而不是使用组件状态中的数据。

并在组件内部使用show loader,直到API调用结束

相关内容

  • 没有找到相关文章

最新更新