如何手动重置SolidJS中createResource()的.error为null并实现重取？

需求 #

• 点击按钮手动触发API请求重发（refetch）
• API请求失败时显示提示框，附带“重试”按钮
• 提示框3秒后自动消失，无需等到重发成功才隐藏

实现思路 #

createResource返回的data.error是内部维护的状态，无法直接重置。我们需要额外创建一个信号来控制错误提示的显示逻辑，脱离对data.error的直接依赖，这样就能灵活控制提示框的显示/隐藏。

修改后的代码 #

import { render } from "solid-js/web";
import { Show, createResource, createSignal, createEffect } from "solid-js";

const fetcher = async () => {
  await new Promise((resolve) => setTimeout(resolve, 3000));
  throw new Error("Something went wrong");
};

function App() {
  const [data, refetch] = createResource(fetcher);
  const [showError, setShowError] = createSignal(false);

  // 监听错误，出现时显示提示并启动自动隐藏定时器
  createEffect(() => {
    if (data.error) {
      setShowError(true);
      // 3秒后自动隐藏提示
      setTimeout(() => setShowError(false), 3000);
    }
  });

  return (
    <div>
      <p>HELLO WORLD</p>
      <Show when={showError()}>
        <p>
          {data.error?.message} | 
          <button onClick={() => {
            setShowError(false); // 点击重试时立即隐藏提示，也可保留让定时器继续执行
            refetch();
          }}>重试</button>
        </p>
      </Show>
    </div>
  );
}

render(() => <App />, document.getElementById("app")!);

关键说明 #

• 用showError信号替代data.error作为提示框的显示条件，实现手动/自动控制隐藏
• 通过createEffect监听data.error的变化，错误出现时自动触发提示显示和定时隐藏
• 调用refetch()方法实现手动触发重发请求，点击重试按钮时可选择立即隐藏提示或等待定时器结束

内容的提问来源于stack exchange，提问作者flix