使用 preact-signal 进行反应不会重新渲染组件

Question

非常简单的项目来测试信号功能，但似乎不是重新渲染组件。 尽管属性的值正在更改（可以通过 console.log 查看），但该值不会在页面视图中更新。 不仅 setInterval 不会更新它，甚至按钮 onClick 处理程序也不会更新页面上的值。 如何解决这个问题？

组件代码：

import { signal,computed } from '@preact/signals-react';


const name = signal("Name")
const count = signal(0);
const double = computed(() => count.value *2);

setInterval(() => {
  //console.log("function called");
  //name.value = Math.random()
  //console.log(name.value);
}, 500)

//the property is updateting here, it can be seen on the page view.
name.value = "New value 1";


export function Comp() {

    console.log("Render Comp");
    
    return (
        
        <div>

            <h2>Name - {name.value}</h2>  
            <button onClick={()=>{name.value="blablabla";      console.log(name.value)}}>Change</button> 

            <button onClick={()=>{count.value++;console.log(double.value)}}>
                {count.value} x 2 = {double}
            </button>                     

        </div>
        
            
    );

    }

App.js代码：

import logo from './logo.svg';
import './App.css';
import { Comp } from './components/Component';



function App() {

  console.log("Render App");
  
  return (
    <div className="App">
          <Comp></Comp>
    </div>
  );
}

export default App;

package.json

{
  "name": "test-signals",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

以防万一有人遇到同样的问题 - 只需删除所有 node_modules 并重新安装所有内容，这对我的情况有帮助。