REact/redux应用程序API调用不工作:显示空和aciton未运行问题

izj3ouym  于 2022-11-12  发布在  React
关注(0)|答案(3)|浏览(166)

嗨,伙计们,我正在创建一个React原生应用程序有一些问题时,调用api获取请求它的像响应给一些错误似乎像行动没有运行生病分享代码下面请如果有人知道这个问题,请让我知道
注意--当我在reducer中运行应用程序控制台时,控制台在action中不运行
控制台中的错误消息DetailsReducer组件中的reducer值,当我将状态Map到属性并检查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":{

   }
}
cigdeys3

cigdeys31#

在没有看到完整的组件定义的情况下,我不能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中调度。在启动请求之前,Did mount将不必要地等待第一次渲染。在will mount中会稍微快一些。

jljoyd4f

jljoyd4f2#

得到的解决方案数据是空的,因为api请求是get方法并传递一些数据,然后更改为post方法,所有工作正常

oknrviil

oknrviil3#

我已经发现你case语法是错误的,它应该像这样在reducer开关里面
用例“获取成功”:
其次,你必须用connect扭曲你的组件,然后从你的减速器中获取状态。
要查看结果,您需要直接与Reducer交互以获取数据,而不是使用来自组件状态数据。
并在组件内部使用showloader,直到API调用结束

相关问题