在渲染屏幕后，在 svelte onmount 中获取 rest api

大佬教程收集整理的这篇文章主要介绍了在渲染屏幕后，在 svelte onmount 中获取 rest api，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决在渲染屏幕后，在 svelte onmount 中获取 rest api？@H_489_1@ 开发过程中遇到在渲染屏幕后，在 svelte onmount 中获取 rest api的问题如何解决？下面主要结合日常开发的经验，给出你关于在渲染屏幕后，在 svelte onmount 中获取 rest api的解决方法建议，希望对你解决在渲染屏幕后，在 svelte onmount 中获取 rest api有所启发或帮助；

使用 svelte 文档中的 onMount 照片示例，我可以使用我自己的 rest API（另一个待办事项..）来显示数据。我将其更改为将照片 HTML 放在一个单独的组件中并且它可以工作。这里是 App.svelte

    <script>
        import { onMount } from 'svelte'
        import Photos from './Photos.svelte'
    
        let photos = []
    
        onMount(async () => {
            const res = await fetch('@R_301_6822@:///mint20-loopBACk4:3000/todos');
            photos = await res.Json();
            console.log('todoList : ',photos)
        })
    </script>
    
    <Photos bind:photos={photos}/>

然后我学习了 MDN svelte 教程并完成了它。后来，我从商店中删除了 todo 初始列表，并在 App.svelte 中添加了一个 onMount fetch。结果是一个空的待办事项列表，但当我与应用程序交互时，会显示数据。

这是控制台输出

Todos.svelte with length of :  0 
into TodoStatus.svelte :  Array []
@R_792_10586@lTodos :  undefined 
completedTodos :  undefined 
Todos length - mounted :  0 
todoList :  Array(7) [ {…},{…},{…} ]
completed mount :  Array(7) [ {…},{…} ]```

和 App.svelte

<script lang="ts">
    import Todos from './components/Todos.svelte'
    import Alert from './components/Alert.svelte'
    import { onMount } from 'svelte'
    import type { TodoType } from './types/todo.type'
    
    let initialTodos: TodoType[] = []
    
    onMount(async () => {
        const res = await fetch('@R_301_6822@:///mint20-loopBACk4:3000/todos');
        const Json = await res.Json();
        console.log('todoList : ',Json)
        Json.forEach(element  => {
          let t: TodoType = { ID: 0,title: '0',isComplete: true }
          t.ID = element.ID
          t.title = element.title
          if (element.isComplete === undefined) {
            t.isComplete = false
          }
          else {
            t.isComplete = element.isComplete
          }
          initialTodos.push(t)
        })
        console.log('completed mount : ',initialTodos)
   })
</script>
      
 <Alert />
 <Todos bind:todos={initialTodos} />

因此它在照片示例中按预期执行，但在此示例中未在 onMount 之前传递空数组。待办事项示例比照片有更多的组件，照片只有单个组件，但可以说，我很困惑。我需要做什么才能让初始屏幕使用填充的数据？

只是补充一下 - 我在照片中包含了控制台日志，这也有相同的模式 - 第一个子组件日志，最后是 App.svelte 中的 onMount。然而在这里，数据正确显示。

所以我认为应该发生的是因为数组的更改会动态反映在显示中，当数组更新时，显示也会更新。但在待办事项中，这不会发生。

解决方法@H_489_1@

DOM 仅在变量赋值上更新。在您的示例中，您使用 .push() 方法将对象添加到数组中。因此，您需要在 forEach 循环之后添加它以确保组件获得更新：

initialTodos = initialTodos;

另一种选择是内联执行此操作。您可以替换：

initialTodos.push(t)

与

initialTodos = [...initialTodos,t]

Here 是关于此的官方文档。

大佬总结

以上是大佬教程为你收集整理的在渲染屏幕后，在 svelte onmount 中获取 rest api全部内容，希望文章能够帮你解决在渲染屏幕后，在 svelte onmount 中获取 rest api所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。