@preact/signals-react跨组件useSignal未触发重渲染问题

你的问题出在两个关键错误上：

1. 错误使用useSignal包裹外部全局信号 #

useSignal是用来创建组件内部的局部信号的，而非引用外部已定义的全局信号。你在ViewArea里用useSignal(DropedFile)相当于创建了一个新的局部信号，初始值是全局信号的引用，这两个信号完全独立——全局信号更新时，局部信号不会同步，自然无法触发组件重渲染。

2. 类型定义错误 #

DropedFileType的定义不符合signal的实际类型，signal()返回的是Signal实例，而非你定义的原始对象结构，这会导致类型不匹配，同时可能干扰信号的订阅逻辑。

修正后的代码 #

Store.tsx #

import { signal, Signal } from "@preact/signals-react";

interface DropedFileValue {
  file_format?: string;
}

// 正确标注Signal类型，明确信号持有值的结构
export const DropedFile: Signal<DropedFileValue> = signal({});

ViewArea.tsx #

import React from "react";
import { DropedFile } from "./Store";

function ViewArea() {
  // 直接引用全局信号，访问其.value属性会自动订阅更新
  return (
    <div>
      {DropedFile.value.file_format === "3mf" && <h1>File format is 3mf</h1>}
    </div>
  );
}

export default ViewArea;

额外说明 #

在组件中使用全局信号时，直接访问信号的.value属性即可——@preact/signals-react会自动追踪组件对信号的依赖，当信号值更新时，组件会自动触发重渲染。

如果需要在组件中对全局信号做转换或派生，可以使用useComputed：

import { useComputed } from "@preact/signals-react";

function ViewArea() {
  const is3mf = useComputed(() => DropedFile.value.file_format === "3mf");
  
  return (
    <div>
      {is3mf.value && <h1>File format is 3mf</h1>}
    </div>
  );
}

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