显示axios数据

问题描述

我有两个问题：

第一个是，在使用axios从API提取数据之后，如何在前端显示数据以及如何使用它来显示自己想要的样子？例如，我调用了大量数据，但希望将其放入下拉菜单中。

第二个问题，与第一个问题有关，假设我有一个路由文件（对于一个sapper项目），该文件具有组件<Dashboard />。在此仪表板组件内部，我有两个名为<BestOf />和<History />的组件。我需要在路由文件中调用api，但要在不在路由文件上的组件中显示数据。我该怎么办？

如果我尝试在路由文件中执行<Dashboard {...variableWithAxiosData} />，如何获取数据以到达<BestOf />和<History />之间的仪表板内部正确的组件？

我不确定是否清楚，但是如果您理解，请随时提出建议，如果不清楚，请告诉我我可以澄清的内容。

欢呼

解决方法

如果您知道从variableWithAxiosData获取的数据以及在BestOf和History中使用的数据，则可以执行以下操作：

// Dashboard.svelte
<script>
  export let best;
  export let history;
  export let otherProps;
</script>

<BestOf {best} />
<History {history} />

另一方面，您可以将所有内容从道具或某些道具传递到<BestOf />和<History />

// Dashboard.svelte
// if variableWithAxiosData = { foo: 1,bar: 2 }
<script>
  export let foo;
</script>

<BestOf {...$$props} />
<!-- equivalent to -->
<BestOf foo={1} bar={2} />

<History {...$$restProps} />
<!-- equivalent to -->
<BestOf bar={2} />