React开发计算器报useState未定义，修改后render不存在如何解决

报错1：'useState' is not defined no-undef #

• 原因：你在App.js中使用了useState Hook，但没有将其从react包中导入
• 修复方式二选一：
  • 方式1：修改App.js的导入语句，显式导入useState：

    // 替换原有 import React from 'react';
    import React, { useState } from 'react';
    

    修改后代码里可以直接使用useState，无需加前缀
  • 方式2：不修改导入语句，将代码中所有useState替换为React.useState，通过React实例调用Hook

报错2：TypeError: react__WEBPACK_IMPORTED_MODULE_0___default.a.render is not a function #

• 原因：你在index.js中错误地从react包导入ReactDOM，react包本身不提供render方法，render方法属于react-dom包
• 修复方式：
  1. 先修正ReactDOM的导入语句，根据你使用的React版本选择：
     • React 17及更低版本：

       // 替换原有 import ReactDOM from 'react';
       import ReactDOM from 'react-dom';
       

       改完后原有ReactDOM.render(<App />, document.getElementById('root'));写法可正常运行
     • React 18及更高版本：
       React 18废弃了原有render方法，需要用新的createRoot API：

       // 导入语句改成
       import ReactDOM from 'react-dom/client';
       // 原来的render调用替换为以下代码
       const root = ReactDOM.createRoot(document.getElementById('root'));
       root.render(<App />);
       

关于yarn.lock的疑问 #

这两个报错和yarn.lock没有任何关联，均是代码中的导入错误、API调用不匹配导致的。

额外优化：你在index.js中导入的useEffect、useState没有被使用，可以直接移除，精简导入语句为import React from 'react';

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