mui 简单轮播库实现问题

Question

使用 react material-ui carousel 实现一个简单的传送带 无效挂钩调用 错误增加。

发生错误：

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM)

You might be breaking the Rules of Hooks

You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

我尽可能地简化了文档起始代码，但错误仍然存在。似乎依赖包版本看起来是正确的，错误只是从代码中出现我不知道如何修复它。

我的代码： On stackblitz

import * as React from 'react';
import { Paper, Typography, Button } from '@mui/material';
import Carousel from 'react-material-ui-carousel';

const Demo = (props) => (
  <Carousel>
    {/* Change above line to <> and it work, maybe some version conflicts??  */}
    <Paper>
      <Typography>First Item</Typography>
      <Button variant="outlined">Click me please!</Button>
    </Paper>
    <Paper>
      <Typography>Second Item</Typography>
      <Button variant="outlined">Click me please!</Button>
    </Paper>
    <Paper>
      <Typography>Third Item</Typography>
      <Button variant="outlined">Click me please!</Button>
    </Paper>
  </Carousel>
);

export default Demo;

Answer 1

看起来他们还没有更新包来支持 React 18 https://github.com/Learus/react-material-ui-carousel/issues/174。

如果您使用 npm 添加：

  "overrides": {
    "react-material-ui-carousel": {
      "react": "^18.0.0",
      "react-dom": "^18.0.0"
    }
  }

到package.json。或者，如果您使用的是 yarn 添加：

 "resolutions": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
 }

我还必须删除我的 package-lock.json 和 node_modules 然后运行 npm install 但也许先不尝试。

mui 简单轮播库实现问题

mui simple carousel library implementing issue

carousel

reactjs

material-ui