非常简单的测试信号功能的项目,但似乎不是重新渲染组件。虽然属性的值正在更改(可以通过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"
]
}
}
型
2条答案
按热度按时间7vux5j2d1#
以防万一有人有同样的问题-只要删除所有的node_modules并重新安装一切,它在我的情况下帮助。
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/)的第一个值。