如何在其他组件修改Preact Signal值？解决跨组件更新报错

报错原因 #

你在MiniTodo组件的渲染阶段直接执行clicked.value = false修改Signal值，这会触发依赖该Signal的CalendarBase组件更新，但此时MiniTodo的渲染流程还未完成，导致Preact检测到跨组件的渲染/更新冲突，抛出错误。

解决方案 #

必须将Signal的修改操作移出渲染流程，放到以下两种场景中：

1. 副作用钩子（useEffect）
   如果需要在组件挂载、卸载或依赖项变化时修改Signal，使用useEffect，它会在渲染完成后执行，不会干扰渲染流程：

   import { useEffect } from 'preact/hooks';
   import { clicked } from './你的组件路径';
   
   function MiniTodo() {
     // 仅在组件挂载时修改一次
     useEffect(() => {
       clicked.value = false;
     }, []);
   
     return <div>你的组件内容</div>;
   }
   

   若需要根据特定值变化触发修改，可在依赖数组中添加对应变量。

2. 事件处理函数
   如果是用户交互（比如点击按钮）触发的状态修改，直接在事件回调中修改即可，事件触发属于渲染完成后的异步操作：

   import { clicked } from './你的组件路径';
   
   function MiniTodo() {
     const handleReset = () => {
       clicked.value = false;
     };
   
     return <button onClick={handleReset}>重置点击状态</button>;
   }
   

禁止操作 #

绝对不要在组件的顶层代码、JSX表达式（比如{clicked.value = false}）或组件函数的直接执行流中修改Signal值，这些都属于渲染阶段的同步执行逻辑，会引发更新冲突。

内容的提问来源于stack exchange，提问作者Henry