MST
星途 面试题库

面试题:Solid.js中createEffect处理异步副作用的基本方式

在Solid.js中,如何使用createEffect来处理异步副作用?请举例说明一个常见场景,比如从API获取数据并更新UI的过程。
48.7万 热度难度
前端开发Solid.js

知识考点

AI 面试

面试题答案

一键面试
  1. 引入必要的模块: 首先,在Solid.js项目中,需要引入createEffectcreateSignal等相关工具。假设项目使用ES6模块,代码如下:
    import { createEffect, createSignal } from'solid-js';
    
  2. 创建信号和异步副作用处理: 以下是从API获取数据并更新UI的示例:
    const fetchData = async () => {
      // 这里模拟从API获取数据
      const response = await fetch('https://example.com/api/data');
      const data = await response.json();
      return data;
    };
    
    const App = () => {
      const [data, setData] = createSignal(null);
    
      createEffect(async () => {
        const result = await fetchData();
        setData(result);
      });
    
      return (
        <div>
          {data()? (
            <pre>{JSON.stringify(data(), null, 2)}</pre>
          ) : (
            <p>Loading...</p>
          )}
        </div>
      );
    };
    
    export default App;
    
    在上述代码中:
    • createSignal创建了一个信号data和它的更新函数setData,初始值为null
    • createEffect内部的异步函数负责调用fetchData来获取数据,获取成功后使用setData更新信号data
    • 在返回的JSX中,根据data的值来判断是显示加载状态还是显示获取到的数据。当data有值时,将其以JSON格式化的形式展示;否则显示“Loading...”。