面试题：Solid.js 组件生命周期中常见错误类型及处理方式

1. 初始化数据错误

原因：在组件初始化阶段，若从 API 获取数据，可能因网络问题、API 故障或参数错误导致数据获取失败。例如，网络不稳定，请求超时；API 接口版本变更，参数传递不正确等。
处理方法：在 onMount 生命周期函数中进行数据获取。使用 try - catch 块捕获错误，若获取失败，设置默认数据或显示错误提示。示例代码如下：

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

const MyComponent = () => {
  const [data, setData] = createSignal(null);
  const [error, setError] = createSignal(null);

  onMount(async () => {
    try {
      const response = await fetch('your-api-url');
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const result = await response.json();
      setData(result);
    } catch (err) {
      setError(err.message);
    }
  });

  return (
    <div>
      {error() && <p>{error()}</p>}
      {data() && <p>{JSON.stringify(data())}</p>}
    </div>
  );
};

2. 依赖更新错误

原因：当组件依赖的数据发生变化时，若没有正确处理依赖，可能导致不必要的重新渲染或渲染错误。例如，在 createEffect 中依赖的数据未正确声明，导致该 effect 没有在依赖数据变化时触发更新。
处理方法：在 createEffect 中明确依赖项。Solid.js 会自动跟踪依赖，当依赖变化时重新运行 effect。示例：

import { createSignal, createEffect } from 'solid-js';

const MyComponent = () => {
  const [count, setCount] = createSignal(0);
  const [text, setText] = createSignal('');

  createEffect(() => {
    // 此处明确依赖了 count 和 text
    console.log(`Count: ${count()}, Text: ${text()}`);
  });

  return (
    <div>
      <input type="number" onChange={(e) => setCount(parseInt(e.target.value))} />
      <input type="text" onChange={(e) => setText(e.target.value)} />
    </div>
  );
};

3. 清理资源错误

原因：在组件卸载时，如果没有正确清理定时器、事件监听器等资源，可能导致内存泄漏。例如，在组件中添加了一个 window.addEventListener 事件监听器，但在组件卸载时没有移除它。
处理方法：在 onCleanup 生命周期函数中清理资源。示例：

import { onMount, onCleanup } from 'solid-js';

const MyComponent = () => {
  let timer;

  onMount(() => {
    timer = setInterval(() => {
      console.log('Timer running');
    }, 1000);
  });

  onCleanup(() => {
    clearInterval(timer);
  });

  return <div>Component with timer</div>;
};

4. 子组件通信错误

原因：父子组件通信时，若父组件传递给子组件的 props 数据类型错误，或者子组件没有正确接收和处理 props，可能导致组件行为异常。例如，父组件传递了一个非预期类型的 prop，子组件没有进行类型检查。
处理方法：在子组件中使用类型检查库（如 TypeScript）来确保接收的 props 类型正确。同时，父组件要保证传递的数据类型与子组件预期一致。示例（使用 TypeScript）：

import { Component } from'solid-js';

interface MyProps {
  value: number;
  label: string;
}

const MyChildComponent: Component<MyProps> = (props) => {
  return (
    <div>
      <label>{props.label}</label>
      <span>{props.value}</span>
    </div>
  );
};

const ParentComponent: Component = () => {
  return <MyChildComponent value={10} label="Some value" />;
};

星途面试题库

面试题：Solid.js 组件生命周期中常见错误类型及处理方式

知识考点

面试题答案

1. 初始化数据错误

2. 依赖更新错误

3. 清理资源错误

4. 子组件通信错误