Javascript 如何使用React访问内置useEffect挂钩的阵列？_Javascript_Reactjs_Typescript

Javascript 如何使用React访问内置useEffect挂钩的阵列？

javascript reactjs typescript

Javascript 如何使用React访问内置useEffect挂钩的阵列？,javascript,reactjs,typescript,Javascript,Reactjs,Typescript,我使用useEffect向2个不同的API发出2个请求。我正在根据返回的信息构建一个数组。我想在useEffect之外访问这个数组，并在下面的返回中使用它，在这里我想使用数据在地图上渲染点。当我试图访问它时，比如我如何使用parkData它说all_data没有定义 import React, {useEffect} from "react"; import {MapContainer, Marker, TileLayer } from "react-leaflet

我使用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>
  );
}

import React，{useffect}来自“React”；
从“react传单”导入{MapContainer，Marker，TileLayer}；
从“/data/skateboard parks.json”导入*作为公园数据；
导入“/App.css”；
从“axios”导入axios；
让所有_info=[]
导出默认函数App（）{
常量验证程序\u url=”http://api-1.com"
const ip_url=”http://ip-api.com/json/"
useffect（（）=>{
异步函数fetchData（）{
const result1=等待axios.get（验证器url）；
for（设i=0；i(
))}
);
}

尝试以下操作：

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

请尝试以下内容：

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

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

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

import React，{useffect，useState}来自“React”；
从“react传单”导入{MapContainer，Marker，TileLayer}；
从“/data/skateboard parks.json”导入*作为公园数据；
导入“/App.css”；
从“axios”导入axios；
导出默认函数App（）{
常量[allInfo，setAllInfo]=useState（[]）；
常量验证程序\u url=”http://api-1.com"
const ip_url=”http://ip-api.com/json/"
useffect（（）=>{
异步函数fetchData（）{
const result1=等待axios.get（验证器url）；
常数tempData=[]
for（设i=0；i(
))}
);
}

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

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

import React，{useffect，useState}来自“React”；
从“react传单”导入{MapContainer，Marker，TileLayer}；
从“/data/skateboard parks.json”导入*作为公园数据；
导入“/App.css”；
从“axios”导入axios；
导出默认函数App（）{
常量[allInfo，setAllInfo]=useState（[]）；
常量验证程序\u url=”http://api-1.com"
const ip_url=”http://ip-api.com/json/"
useffect（（）=>{
异步函数fetchData（）{
const result1=等待axios.get（验证器url）；
常数tempData=[]
for（设i=0；i(
))}
);
}

使用

useState

hook创建一个状态来存储数组并使用它，而不是在函数外部定义数组

导出默认函数App（）{
常量[allInfo，setAllInfo]=React.useState（[]）；
常量验证程序\u url=”http://api-1.com"
const ip_url=”http://ip-api.com/json/"
useffect（（）=>{
异步函数fetchData（）{
const result1=等待axios.get（验证器url）；
常量数据=[]；
for（设i=0；i[…prevState，data]）；
}
fetchData（）；
}, []);
...
}

使用

useState

hook创建一个状态来存储数组并使用它，而不是在函数外部定义数组

导出默认函数App（）{
常量[allInfo，setAllInfo]=React.useState（[]）；
常量验证程序\u url=”http://api-1.com"
const ip_url=”http://ip-api.com/json/"
useffect（（）=>{
异步函数fetchData（）{
const result1=等待axios.get（验证器url）；
常量数据=[]；
for（设i=0；i[…prevState，data]）；
}
fetchData（）；
}, []);
...
}

将其存储为状态。旁注：您可能希望处理来自

fetchData

function.的错误。。