Reactjs 为什么它给我一个钩子警告，而我没有在我的组件中使用任何钩子？

我正在尝试将传单地图显示为React组件。一旦我尝试使用此组件，就会出现错误：

Error: 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:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. 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.

我的组件取自，最终我的组件看起来如下：

import React, { Component } from "react";
import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";

const position = [51.405, -0.09];

export default class LeafLetSubmitMap extends Component {
  render() {
    return (
      <MapContainer center={position} zoom={13} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={position}>
          <Popup>
            Is it changing? <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>
    );
  }
}

依赖项的完整列表：

  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.1",
    "@testing-library/user-event": "^12.1.10",
    "antd": "^4.8.2",
    "axios": "^0.21.0",
    "date-fns": "^2.16.1",
    "joi-browser": "^13.4.0",
    "jquery": "^3.5.1",
    "jwt-decode": "^3.0.0",
    "lodash": "^4.17.20",
    "mapbox-gl": "^1.12.0",
    "react": "^17.0.1",
    "react-aws-s3": "^1.3.0",
    "react-dom": "^17.0.1",
    "react-owl-carousel": "^2.3.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.0",
    "react-toastify": "^6.0.9",
    "web-vitals": "^0.2.4"
  },

这看起来很容易添加，尽管我没有这么做。有什么我需要知道的，以便如何添加它？因为我的主要目标是能够找到地址位置并存储Langtude和latitude，以及MongoDB中的地址

尝试了建议的功能组件，仍然是相同的错误

import React from "react";
import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
const position = [51.405, -0.09];

export default function LeafLetSubmitMap() {
  return (
    <MapContainer center={position} zoom={13} scrollWheelZoom={false}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={position}>
        <Popup>
          Is it changing? <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  );
}

从“React”导入React；
从“react传单”导入{MapContainer，Marker，Popup，TileLayer}；
常数位置=[51.405，-0.09]；
导出默认函数{
返回(
它在变化吗？
可轻松定制。
);
}

您需要将“反应传单”和“传单”添加到依赖项列表中。运行

npm add传单

和

npm add react传单

-此处存在某种版本冲突，因此无法在函数中调用MapContainer类中的

useffect

挂钩。还要确保已导入传单css，否则贴图将无法渲染。通过创建带有样式的div来包装MapContainer，或者通过在传单.css中编辑传单容器：

。传单容器{
溢出：隐藏；
高度：400px；
}
常数位置=[51.405，-0.09]应该在渲染中（）尝试从渲染中删除弹出组件，@jarivak为什么它需要在渲染中？我试过了，但没用。文件中定义的常量可以在任何地方使用。我看不出有什么特别的理由呆在里面@Roy.B此处使用了从“react传单可编辑弹出窗口”导入弹出窗口的
，
，我没有使用它，尽管按照您的建议尝试删除此部分，但它不起作用。此外，您还尝试仅将
MapContainer
与
TileLayer
分开。相同的error@YoungDad问题是使用useEffect渲染中的一个组件，而您不能在react类组件中使用Efect，因此可能会将SubmitMap更改为函数组件，因为您无论如何都不会在其中使用任何react生命周期，而且应该在其中使用work@Roy.B这是一个很好的猜测，虽然我很兴奋这可能是它，它不起作用，在编辑的版本中添加了代码：(.
import React from "react";
import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
const position = [51.405, -0.09];

export default function LeafLetSubmitMap() {
  return (
    <MapContainer center={position} zoom={13} scrollWheelZoom={false}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={position}>
        <Popup>
          Is it changing? <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  );
}