时间戳

首页 > 解决方案 > 如何使用 React 访问内置于 useEffect 挂钩的数组？

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

问题描述

我正在使用 useEffect 向 2 个不同的 API 发出 2 个请求。我正在根据返回的信息构建一个数组。我想在 useEffect 之外访问这个数组并在下面的返回中使用它，我想使用数据在地图上渲染点。当我尝试访问它时，就像我使用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>
  );
}

标签： javascriptreactjstypescript

解决方案

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

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>
  );
}

推荐阅读