reactjs React with preact-signal doesn't rerender component

qncylg1j  于 5个月前  发布在  React
关注(0)|答案(2)|浏览(63)

非常简单的测试信号功能的项目,但似乎不是重新渲染组件。虽然属性的值正在更改(可以通过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"
    ]
  }
}

7vux5j2d

7vux5j2d1#

以防万一有人有同样的问题-只要删除所有的node_modules并重新安装一切,它在我的情况下帮助。

hmtdttj4

hmtdttj42#

只是遇到并调查了同样的问题。长话短说:Preact understands itself as an alternative to React,因此它不仅仅是一个库,你可以简单地添加到你的React应用程序作为任何其他NPM包,然后期待开箱即用。
相反,他们有一些关于如何创建Preact应用程序的文档(例如使用Vite),据说它提供了React兼容层

尝试实现与React的100%兼容性

(see https://preactjs.com/guide/v10/differences-to-react/)的第一个值。

相关问题