Javascript React js，无法读取属性；0"；。调用API时

我无法从fetch函数访问数据。我想将数据从action传递到reducer。使用fetch函数调用API，API以promise的形式返回。因此，单独调用API，并将数据返回到操作负载

从“../constant.js”导入{INDEX_PRESCRIPTION}；
函数fetch_prescription（）{
const base_url=”http://192.168.1.22:3000/api/v1/";
const fetch_url=`${base_url}/prescriptions`；
设datas=[]；
返回fetch（fetch\u url{
方法：“获取”
})
.then（response=>response.json（））
。然后（数据=>{
数据推送（数据['处方]）
返回数据
})
}
export const indexpdescription=async（）=>{
常量动作={
类型：索引，
详情：等待取药处方（）
}
返回动作；
console.log（'action details'，action.details）
}
导出常量GetIndexDescription=（分派）=>{
分派（indexPrescription（））；
}

只有在获得服务器的答复后，您的承诺才会得到解决。您需要使用额外的层来处理redux中的

async

行为

例如，使用

redux thunk

，您可以使其工作如下：

从“../constant.js”导入{INDEX_PRESCRIPTION}；
函数fetch_prescription（）{
const base_url=”http://192.168.1.22:3000/api/v1/";
const fetch_url=`${base_url}/prescriptions`；
设datas=[]；
返回fetch（fetch\u url{
方法：“获取”
})
.then（response=>response.json（））
。然后（数据=>数据[‘处方]）；
}
导出常量索引描述=（分派）=>{
取药方
。然后（详细信息=>{
常量动作={
类型：索引，
细节
}
派遣（行动）；
}
}

此处缺少的部分是函数

fetch\u prescription（）

是异步的。因此，在访问数据时，数据可能不可用

在解析asnyc函数之前，您正在返回数据

你可以把它当作

    import { INDEX_PRESCRIPTION } from '../constant.js';

    function fetch_prescription(){
      const base_url= "http://192.168.1.22:3000/api/v1/";
      const fetch_url = `${base_url}/prescriptions`;
      let datas = [];
      return fetch(fetch_url, {
        method: "GET"
      })
      .then(response => response.json())
      .then(data => {

        datas.push(data['prescriptions'])
        return datas
      })
    }

    export const indexPrescription = async () => {
      const action = {
        type: INDEX_PRESCRIPTION,
        details: await fetch_prescription()
      }
      return action;
    }

    export const getIndexPrescription = (dispatch) => {
       dispatch(indexPrescription());
    }

并在任何需要的地方发送上述操作

---

在componentWillMount中调用getIndexDescription（）查找下面的代码，将

redux thunk

添加到应用程序中

...
import { createStore, applyMiddleware } from 'redux';
import reduxThunk from 'redux-thunk';
...

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
const store = createStoreWithMiddleware(reducers);

<Provider store={store}>
...
</Provider>

。。。
从“redux”导入{createStore，applyMiddleware}；
从“redux thunk”导入redux thunk；
...
const createStoreWithMiddleware=applyMiddleware（reduxThunk）（createStore）；
const store=createStoreWithMiddleware（reducers）；
...

在我的组件中的componentWillMount（）下使用dispatch时，错误声明为“dispatch is not defined”。我需要从任何函数导入分派吗？仍然，错误表明分派不是函数。我也搜索了这个问题，但仍然无法解决。@Thanjaya您安装了redux和redux thuink吗？npm安装--保存redux thunk redux是的，我安装了redux中的applyMiddleware查看redux thunk。并实现了您的代码。错误声明为“dispatch不是函数”，您需要在

mapDispatchToProps

部分

connect

语句中调用它