useEffect "在函数 "onEachCountry" 中调用，该函数既不是 React 函数组件也不是自定义 React Hook 函数

Question

我正在尝试使用 geoJSON 和以下 api 将冠状病毒病例按国家/地区放在平面球地图上的弹出行 42 中： https://corona.lmao.ninja/v3/covid-19/countries 但是，这告诉我错误“第 23:3 行：React Hook “useEffect”在函数“onEachCountry”中被调用，该函数既不是 React 函数组件也不是自定义 React Hook 函数。React 组件名称必须以大写字母 react-hook 开头“我用 axios 调用我的 api 并使用 latest 来索引数据

你有解决办法吗？

这是我的代码

import React, { useEffect, useState} from 'react';
import axios from "axios";
import { Map, GeoJSON } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "./CovidMap.css";



const CovidMap = ({ countries }) => {
    const mapStyle = {
        fillColor: "white",
        weight: 1,
        color: "black",
        fillOpacity: 1,
    };

    const onEachCountry = (country, layer)=>{

 const [latest, setLatest] = useState([]);
 

  // connexion api 
  useEffect(() => {
    axios
      .all([
           //donnees par pays 
        axios.get("https://corona.lmao.ninja/v3/covid-19/countries"),
     
      ])
      .then(responseArr => {
        setLatest(responseArr[0].data);
      })
      .catch(err => {
        console.log(err);
      });
  }, []);


        layer.options.fillColor = country.properties.color;
        const name = country.properties.ADMIN; //parametrage popup pays 
        const cases = country.properties.cases;
            layer.bindPopup(`${name} ${latest.cases}`);
    }

    console.log(countries);
    return (
        <Map style={{ height: "90vh" }} zoom={2} center={[20, 100]}>
            <GeoJSON
                style={mapStyle}
                data={countries}
                onEachFeature={onEachCountry} />
        </Map>
    );
};

export default CovidMap;

Answer 1

您在onEachCountry 中调用useEffect，正如您收到的错误所见，这是不允许的。有关更多信息，请参阅 React 文档。 https://reactjs.org/docs/hooks-effect.html.

我认为您正在尝试的是以下内容：

import React, { useEffect, useState} from 'react';
import axios from "axios";
import { Map, GeoJSON } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "./CovidMap.css";



const CovidMap = ({ countries }) => {
    const mapStyle = {
        fillColor: "white",
        weight: 1,
        color: "black",
        fillOpacity: 1,
    };

    const [latest, setLatest] = useState([]);

    // connexion API 
    useEffect(() => {
      axios
        .all([
           //donnees par pays 
          axios.get("https://corona.lmao.ninja/v3/covid-19/countries"),
     
          ])
          .then(responseArr => {
            setLatest(responseArr[0].data);
          })
          .catch(err => {
            console.log(err);
          });
     }, []);

   const onEachCountry = (country, layer)=> {
        layer.options.fillColor = country.properties.color;
        const name = country.properties.ADMIN; //parametrage popup pays 
        const cases = country.properties.cases;
        layer.bindPopup(`${name} ${latest.cases}`);
    }

    return (
        <Map style={{ height: "90vh" }} zoom={2} center={[20, 100]}>
            <GeoJSON
                style={mapStyle}
                data={countries}
                onEachFeature={onEachCountry} />
        </Map>
    );
};

export default CovidMap;