面试题答案
一键面试- 引入必要的模块:
首先,在Solid.js项目中,需要引入
createEffect
和createSignal
等相关工具。假设项目使用ES6模块,代码如下:import { createEffect, createSignal } from'solid-js';
- 创建信号和异步副作用处理:
以下是从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...”。