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

Question

身体： 大家好

我面临 @preact/signals-react 库的问题，其中一个组件中的信号更新不会触发另一个组件中的重新渲染。这是我的代码的简化版本：

Store.tsx//

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

interface DropedFileType {
  value?: {
    file_format?: string;
  };
}
export const DropedFile: DropedFileType = signal({});

ViewArea.tsx：

import React from "react";
import { useSignal } from "@preact/signals-react";
import { DropedFile } from "./Store";

function ViewArea() {
  const dropedFile = useSignal(DropedFile);

  return (
    <div>
      {dropedFile.value?.file_format === "3mf" && <h1>File format is 3mf</h1>}
    </div>
  );
}

export default ViewArea;

在此设置中，当 DropedFile.value 在另一个组件中更新时，更改不会反映在 ViewArea 中，直到触发手动重新渲染（例如，通过单击页面上的某个位置）。

有人遇到过类似的问题或对如何解决这个问题有任何建议吗？任何帮助将不胜感激！

我尝试使用

useSignal

中的

@preact/signals-react

挂钩来跟踪单独存储文件 (

Store.tsx

) 中定义的信号的变化。我期望当一个组件中的信号值更新时，它会触发使用该信号的另一个组件（

ViewArea.tsx

）中的重新渲染。但是，重新渲染不会自动发生。相反，仅当我手动触发重新渲染时（例如，通过单击页面上的某处），才会反映更新的值。

Answer 1

您似乎没有按照设置说明进行操作，在此处找到。您必须使用 Babel 插件或

useSignals()

钩子，但您两者都没有使用。

// ViewArea.tsx
import React from "react";
import { useSignal } from "@preact/signals-react";
import { useSignals } from "@preact/signals-react/runtime";
import { DropedFile } from "./Store";

function ViewArea() {
  useSignals();
  const dropedFile = useSignal(DropedFile);

  return (
    <div>
      {dropedFile.value?.file_format === "3mf" && <h1>File format is 3mf</h1>}
    </div>
  );
}

export default ViewArea;