元素
元素
工具
博客
问答

Graffiti 桌面应用里 React 组件状态不更新怎么办？

程序员树鹤 阅读 180
框架

我在用 Graffiti 做一个桌面端的笔记工具，用的是 React。奇怪的是，我点击按钮修改状态后，界面完全没反应，但 console.log 能打出新值。

试过把 setState 改成 useCallback 包裹的函数，也试过 forceUpdate，都不行。是不是 Graffiti 的渲染机制和普通 Web 不一样？

const NoteEditor = () => {
  const [content, setContent] = useState('');
  
  const handleChange = (e) => {
    setContent(e.target.value);
    console.log(content); // 这里打印的是旧值
  };

  return <textarea value={content} onChange={handleChange} />;
};
我来解答 赞 8 收藏
二维码
手机扫码查看
反馈
2 条解答
IT人亚飞
IT人亚飞 Lv1
我之前也碰到过类似的问题，问题其实出在 console.log(content) 打印的是旧值这个现象上。这是因为 React 的状态更新是异步的，当你调用 setContent 时，状态并不会立即更新。

你不用改用 useCallback 或 forceUpdate 这些方法，直接把代码稍微调整一下就行。把 console.log 放到 useEffect 里去监听 content 的变化：

const NoteEditor = () => {

  const [content, setContent] = useState('');

  

  const handleChange = (e) => {

    setContent(e.target.value);

  };



  useEffect(() => {

    console.log(content);

  }, [content]);



  return <textarea value={content} onChange={handleChange} />;

};


这样就能正确看到更新后的状态了。Graffiti 本质上还是基于 React 的，渲染机制和普通 Web 应用没什么不同，就是状态更新是异步的这个特性有时候让人困惑。

另外一个小建议，如果你的笔记内容比较长，可能要考虑防抖或者节流来优化性能，不然频繁的状态更新可能会让应用变慢。不过这个问题可以先放一放，先把状态更新搞清楚再说。
点赞
2026-03-31 18:02
Zz彩云
Zz彩云 Lv1
console.log的问题是因为state更新是异步的，直接打印content当然还是旧值。界面不更新的话，检查下是不是把content绑定到了value而不是defaultValue。

const NoteEditor = () => {

  const [content, setContent] = useState('');



  const handleChange = (e) => {

    setContent(e.target.value);

    console.log('新值:', e.target.value); // 这样才对

  };



  return