❤ React报错归纳分析篇

❤ React报错归纳分析篇

1、You passed a second argument to root.render(…) but it only accepts one argument.（使用组件时候遇到）

You passed a second argument to root.render(…) but it only accepts one argument.

react-dom.development.js:86 Warning: You passed a second argument to root.render(…) but it only accepts one argument.

♥ 原因

导入两个组件，需要将两个组件放在一个容器内

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <>
    <Header></Header>,
  	<Footer></Footer>
  </>
);

2、 ‘react-scripts’ is not recognized as an internal or external command,operable program or batch file.（npm start 时候遇到）

npm start 运行项目遇见：

原因：
有一些问题npm install无法完成 React 脚本的安装。按照这些简单的步骤来让它工作

解决方法一：

删除 node_modules 文件夹
删除 package-lock.json 文件
跑 npm install   //yarn install
跑 npm i -S react-scripts //yarn add -S react-scripts
跑 npm start //yarn start

3、Uncaught SyntaxError: The requested module ‘/node_modules/.vite/deps/react-router-dom.js?v=fa64ee62’ does not provide an export named ‘Switch’ (at App.tsx:9:35) （使用react-router-dom时候遇到）

报错如下

原因

react-router-dom淘汰了switch，最后找到一篇文章发现果然如此。react-router-dom从V5升级到V6后，Switch 重命名为 Routes，

"dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "^6.3.0"
  },

解决

更改方式
app.jsx之中

// 原本的写法
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Login from '@/views/main/Login'; // 导入登录组件
import Home from '@/views/main/Home'; // 导入主页组件


function App() {
  const [count, setCount] = useState(0)
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} /> {/* 主页路径 */}
        <Route path="/login" component={Login} /> {/* 登录页路径 */}
      </Switch>
    </Router>
  )
}

export default App


//更改为

import {
  BrowserRouter as Router,
  Routes,
  Route,
} from "react-router-dom";
import Login from '@/views/main/Login'; // 导入登录组件
import Home from '@/views/main/Home'; // 导入主页组件


function App() {
  // const [count, setCount] = useState(0)
  return (
    <Router>
      <Routes>
        <Route exact path="/" component={Home} /> {/* 主页路径 */}
        <Route path="/login" component={Login} /> {/* 登录页路径 */}
      </Routes>
    </Router>
  )
}

export default App

4、使用useHistory时提示

背景

在React之中使用useHistory提示以下信息：

我的使用方法是这样子的：

import { useHistory } from 'react-router-dom';

const history = useHistory();
history.push('/admin');

原因

查以后发现React-Routerv6里面的写法已经不再使用useHistory了，而是使用useNavigate 代替了useHistory

解决方法

使用useNavigate

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();

navigate("/admin")

5、 The tag is unrecognized in this browser.If you meant to render a React component（组建使用）

import React from 'react';
import ReactDOM from 'react-dom';
import hello from './hello';
ReactDOM.render(<hello/>,document.getElementById('root')
);

原因：此浏览器无法识别标记。如果要呈现react组件，请以大写字母开头。

解决：将组件改成大写的，

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './hello';
ReactDOM.render(<Hello/>,document.getElementById('root')
);

6、React does not recognize the Link prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase link instead. If you accidentally passed it from a parent component, remove it from the DOM element.（大小写问题）

将Link换成link即可

7、Received true for a non-boolean attribute requiredx

required写成了requiredx.

8、（react严格模式）findDOMNode is deprecated and will be removed in the next major release. Instead, add a ref directly to the element you want to reference

findDOMNode已弃用，并将在下一个主要版本中删除。相反，直接向要引用的元素添加一个ref

方式一：
去除严格模式

root.render(
  // <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  // </React.StrictMode>
);

方式二：
按照不同要求进行更改，不适用原生，使用ref

9、Each child in a list should have a unique “key” prop.

原因：渲染列表时没有使用 key

然后我看了一下我的Table 的取值，发现默认的时候，其实有一个属性是没有的：

const dataSource = [
  {
    key: '1',
    name: '张三',
    age: 20,
    address: '北京市海淀区',
  },
];

 <Table rowKey="id" dataSource={result.length === 0 ? dataSource : result} columns={columns}/>

然后我更改key 为id ：

const dataSource = [
  {
    key: '1',
    name: '张三',
    age: 20,
    address: '北京市海淀区',
  },
];

生效！

antd写法

Ant react 组件报错

1、Warning: [antd: Modal] visible is deprecated. Please use open instead.

antd的visible 属性已经快要弃用了，改成open 就可以了

open={modalVisible}