Javascript 通过Redux获取数据时加载屏幕

当我从API获取数据时，我想开始向我的组件添加加载屏幕。我做了一些研究并尽了最大努力，但我的加载屏幕从未消失，我也不知道为什么。我已经试着解决这个问题一段时间了，呵呵

行动：

减速器： 在我的组件中，我只有以下内容：

if (this.props.isLoading) return <div>laddar</div>

安慰

分派（setDoors（doors））

应该是

分派（fetchdoorssaccess（doors））

，并且应该仅在成功调用axios时调用

 const fetchDoorsSuccess = data => {
   return {
     type: 'FETCH_DOORS_SUCCESS',
     payload: {
       setDoors: data
     }
   }
 }

---

一般来说，每个ajax调用都有三个标准操作，一个

请求

，

请求成功

，和

请求错误

。在

REQUEST

的reducer中，您应该设置

isLoading:true

，对于其他两个，您应该设置

isLoading:false

，同时减少从服务器返回的任何数据。

您有一个棘手的小错误，您没有等待您认为正在等待的数据

比较你的

const doors = await axios.get(`${settings.hostname}/locks`).data

到

在第一种情况下，您实际上正在等待从axios调用返回的promise（而不是等待的结果）上的一些未定义的属性

.data

 const fetchDoorsSuccess = data => {
   return {
     type: 'FETCH_DOORS_SUCCESS',
     payload: {
       setDoors: data
     }
   }
 }

在第二种情况下，这应该是可行的，您正在等待承诺，然后获得等待承诺的

.data

属性

我在下面的小片段中重现了这个问题。注意第一个结果弹出的速度有多快，即使承诺应该在4秒后解决

constgetdatapromise=（）=>newpromise（resolve=>setTimeout（（）=>resolve（{data:42}），4000））；
（异步函数e（）{
const data=wait getDataPromise（）.data；
console.log（“错误：等待getDataPromise（）.data=，data”）
})();
（异步函数e（）{
const data=（等待getDataPromise（））.data；
log（“右：（等待getDataPromise（））.data=，data）
})();你有表示加载屏幕的React元素吗？@lilezek没有，还没有。我只有
div
自动取款机，因为我想检查它是否正常工作。你在哪里派
“取款成功”
？我看不到。可能是其他原因造成的：你正在等待axios.get（…）.data，但你应该只等待
.get（…）
，就像等待axios.get（…）.data一样。如果这有什么不同，你能试试吗？如果你没有在减速机中调度改变其值的操作，你希望如何改变
isLoading
？这真是个谜：））。只要在
分派（setDoors（doors））
之后分派它就可以了。谢谢您的回复，但我不知道为什么我的组件中的所有内容都变得不定义了。当我记录状态时，我可以看到我的门上有一个名为
data
的钥匙，它似乎未定义。你能看看我的照片吗？
const mapStateToProps = state => {
  console.log(state.fetchDoors.isLoading) // Always true
  return {
    doors: state.fetchDoors.doors,
    isLoading: state.fetchDoors.isLoading,
    controllers: state.fetchDoors.controllers
  }
}

 const fetchDoorsSuccess = data => {
   return {
     type: 'FETCH_DOORS_SUCCESS',
     payload: {
       setDoors: data
     }
   }
 }

const doors = await axios.get(`${settings.hostname}/locks`).data

const doors = (await axios.get(`${settings.hostname}/locks`)).data