面试题：Solid.js 组件生命周期中如何处理异步数据加载

Question

在 Solid.js 组件中，假设你需要从 API 获取数据并在组件渲染时展示。请描述使用 Solid.js 的生命周期函数（如 onMount）来处理这个异步操作的步骤，并且给出一个简单的代码示例。

Answer 1

1. 步骤描述：
   • 创建状态变量：使用 createSignal 创建一个状态变量来存储从 API 获取的数据。这个状态变量将用于在组件中显示数据。
   • 使用 onMount 生命周期函数：onMount 会在组件首次渲染到 DOM 后立即执行。在 onMount 回调函数中发起异步 API 请求。
   • 更新状态：当 API 请求成功返回数据后，使用状态变量的更新函数来更新状态，从而触发组件重新渲染以显示新的数据。如果请求失败，可以选择处理错误，例如显示错误信息。
2. 代码示例：

import { createSignal, onMount } from "solid-js";

const MyComponent = () => {
  const [data, setData] = createSignal(null);
  onMount(() => {
    fetch('https://example.com/api/data')
    .then(response => response.json())
    .then(jsonData => setData(jsonData))
    .catch(error => console.error('Error fetching data:', error));
  });

  return (
    <div>
      {data() ? (
        <pre>{JSON.stringify(data(), null, 2)}</pre>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default MyComponent;