如何使用 React 访问内置于 useEffect 挂钩的数组？

Question

我正在使用 useEffect 向 2 个不同的 API 发出 2 个请求。 我正在根据返回的信息构建一个数组。 我想在 useEffect 之外访问这个数组并在下面的返回中使用它，我想使用数据在 map 上渲染点。 当我尝试访问它时，就像我使用parkData ，它说all_data没有定义。

import React, {useEffect} from "react";
import {MapContainer, Marker, TileLayer } from "react-leaflet";
import * as parkData from "./data/skateboard-parks.json";
import "./App.css";
import axios from 'axios';

let all_info = []

export default function App() {

    const validator_url = "http://api-1.com"
    const ip_url = "http://ip-api.com/json/"
    
    useEffect(() => {
      async function fetchData() {
        const result1 = await axios.get(validator_url);

        for (let i = 0; i < result1.data.count; i+=1) {
          const result2 = await axios.get(`${ip_url}${result1.data.results[i].ip_address}`);

          let ip_address = result1.data.results[i].ip_address
          let lat = result2.data.lat
          let lon = result2.data.lon

          all_info.push([ip_address, lat, lon])
        }
      }
      fetchData();
    }, []);

  return (
    <MapContainer center={[45.4, -75.7]} zoom={12}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {/* // HOW CAN I ACCESS all_info ARRAY HERE instead of using parkData? */}
      {parkData.features.map(park => (
        <Marker key={park.properties.PARK_ID} position={[park.geometry.coordinates[1], park.geometry.coordinates[0]]}>
        </Marker>
      ))}
    </MapContainer>
  );
}

Answer 1

您必须将该数据存储在组件的内部 state 中，而不是全局变量中。

import React, {useEffect, useState} from "react";
import {MapContainer, Marker, TileLayer } from "react-leaflet";
import * as parkData from "./data/skateboard-parks.json";
import "./App.css";
import axios from 'axios';

export default function App() {
    const [allInfo, setAllInfo] = useState([]);
    const validator_url = "http://api-1.com"
    const ip_url = "http://ip-api.com/json/"
    
    useEffect(() => {
      async function fetchData() {
        const result1 = await axios.get(validator_url);
        const tempData = []

        for (let i = 0; i < result1.data.count; i+=1) {
          const result2 = await axios.get(`${ip_url}${result1.data.results[i].ip_address}`);

          let ip_address = result1.data.results[i].ip_address
          let lat = result2.data.lat
          let lon = result2.data.lon

          tempData.push([ip_address, lat, lon])
        }
        setAllInfo(tempData);
      }
      fetchData();
    }, []);

  return (
    <MapContainer center={[45.4, -75.7]} zoom={12}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {/* // HOW CAN I ACCESS all_info ARRAY HERE instead of using parkData? */}
      {parkData.features.map(park => (
        <Marker key={park.properties.PARK_ID} position={[park.geometry.coordinates[1], park.geometry.coordinates[0]]}>
        </Marker>
      ))}
    </MapContainer>
  );
}

Answer 2

试试下面：

{all_info?all_info.features.map(all_info => (
// your code
        
)):null}

Answer 3

使用useState挂钩创建 state 来存储数组并使用它，而不是在 function 之外定义数组。

export default function App() {
    const [allInfo, setAllInfo] = React.useState([]);
    
    const validator_url = "http://api-1.com"
    const ip_url = "http://ip-api.com/json/"
    
    useEffect(() => {
      async function fetchData() {
        const result1 = await axios.get(validator_url);
        const data = [];
    
        for (let i = 0; i < result1.data.count; i+=1) {
          const result2 = await axios.get(`${ip_url}${result1.data.results[i].ip_address}`);

          let ip_address = result1.data.results[i].ip_address
          let lat = result2.data.lat
          let lon = result2.data.lon

          data.push([ip_address, lat, lon]);
        }

        setAllData(prevState => [...prevState, data]);
      }
      fetchData();
    }, []);
    ...
    }