React Signals 不渲染，而 UseState 渲染

Question

我已经使用 UseState 构建了我的第一个 React 试用应用程序，现在正在尝试在同一个试用应用程序中切换到 React Signals。一切似乎都正常，我没有收到任何错误，浏览器控制台显示数据已返回，这对于基于 UseState 的数据以及基于 UseSignals 的数据都适用。但是，基于 UseSignals 的数据不会在“我的应用程序”中呈现。我是新手，所以可能犯了初学者的错误，但我似乎无法弄清楚什么错误。非常感谢您帮助解决这个问题！

这是代码，请不要介意它的笨拙，现在重点关注信号主题。

import { useState } from 'react';
**import { useSignal } from '@preact/signals-react'**

const FamiliezSysteem = () => {

    const MWDtFeReq = **useSignal("");**
    const MWDtMwReq = **useSignal("");**

    const handleButtonClickToPingMW = async () => {
        try {
            const now = new Date();
            const offset = now.getTimezoneOffset() * 60000; 
            const localISOTime = new Date(now - offset).toISOString().slice(0, -1); 
            
            const url = `http://127.0.0.1:8000/pingAPI?timestampFE=${localISOTime}`;

            const response = await fetch(url);
            const data = await response.json();
            MWDtFeReq.value = await data[0]["FE request time"];
            MWDtMwReq.value = await data[0]["MW request time"];
 
        } catch (error) {
            console.error('Error fetching data:', error);
        }
    };
    return (
        <div>
            <div>Familiez systeem, FTW!</div>
            <button onClick={handleButtonClickToPingMW}>Ping MiddleWare</button>
            <pre> Frontend request Time= {MWDtFeReq.value} </pre>
            <pre> Middleware request Time= {MWDtMwReq.value} </pre>
        </div>

    );
};

export default FamiliezSysteem;

CoPilot 给我的建议明显不正确或看似正确但不起作用。在这种情况下，副驾驶就说这么多了:-)。所以我在互联网上搜索了老式的方法，但这也没有带来蚂蚁解决方案。我从包含在数组中的 JSON 对象开始（我从数据库获取的数据仍然如此），然后切换到每个值一个字段的方法（仅适用于我从中间件获取的数据），而没有任何包含结构。但这并没有什么区别。然后我切换了 UseSignals 语句周围，这也没有帮助。在我的学习曲线的这一点上，我似乎没有任何进一步的选择，所以我希望有人能为我指出正确的方向。 PS：在“查看 Stack Overflow 上已经存在的问题......”中，最后一期似乎与我的非常相似。但该开发人员没有使用 Bable 或 UseSignal，这似乎是这种情况下的问题，但我确实使用了 UseSignal。

Answer 1

您需要使用

useSignals()

或带有 React 的 Babel 插件。否则，该组件将不会对信号更新做出反应。 说明。

 import { useSignal } from '@preact/signals-react'
+import { useSignals } from "@preact/signals-react/runtime";

 const FamiliezSysteem = () => {
+    useSignals();
 ...

首先需要调用每个使用信号的组件。