面试题：Solid.js 组件生命周期中如何在挂载后执行特定操作

Question

在 Solid.js 中，当一个组件挂载到 DOM 后，你需要执行一段获取 API 数据并更新组件状态的代码。请描述具体实现步骤，并给出一个简单的代码示例。

Answer 1

实现步骤

1. 在组件内部使用 createSignal 创建状态来存储 API 数据。
2. 使用 onMount 生命周期函数，当组件挂载到 DOM 后触发该函数。
3. 在 onMount 函数内部，通过 fetch 等方式调用 API 获取数据。
4. 获取到数据后，使用创建的状态更新函数来更新组件状态。

代码示例

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(result => setData(result));
  });

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

export default MyComponent;