React setState更新后组件未重新渲染问题求助

问题描述 #

我在学习ReactJS第四章时遇到一个问题：调用setState后控制台显示状态值已改变，但组件始终无法重新渲染展示更新后的内容。我尝试了两种状态实现方式：

第一种基础字符串状态：

const Content = () => {
  const [name, setName] = useState('defs');

  const handleNameChange = () =>{
    setName('Julian');
  }

  return (
    <main>
        <p >
           Hello {name}!
           {console.log(name)}
        </p>
        <button onClick={handleNameChange}>Change Name</button>  
    </main>
  )
}

第二种对象状态（代码存在拼写错误）：

const [name, setName] = useState({default: "Dave"});
const handleNameChaneg = () => {
  setName({...name, default:"Julian"});
}

问题更新：同一代码在playcode.io上可以正常更新页面，但本地文件在Firefox开发者版中无法更新。

解决方案 #

• 强制刷新清除缓存：Firefox开发者版可能缓存了旧代码，按下Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新，或在开发者工具「网络」面板勾选「禁用缓存」后重新加载。
• 统一React版本：检查本地项目React和ReactDOM版本与playcode.io是否一致，执行npm list react react-dom查看，版本不一致则更新：

  npm install react@latest react-dom@latest
  

• 修正代码拼写错误：第二种写法中handleNameChaneg应为handleNameChange，修正后再测试。
• 确认组件挂载正确性：确保Content组件被正确渲染到DOM，比如根组件中：

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import Content from './Content';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<Content />);
  

• 禁用浏览器扩展：部分扩展（如广告拦截器、脚本管理器）可能干扰渲染，禁用所有扩展后重新测试。

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