反应 JS 导入文件并根据条件使用特定的文件答案

【问题标题】：react JS import Files and use specific one based on Condition反应 JS 导入文件并根据条件使用特定的文件
【发布时间】：2022-01-05 18:50:56
【问题描述】：

我试图在谷歌地图上显示基于 lat 和 lng 的 json 文件中的标记。

我正在导入这样的文件：

import * as crimeData from "../resources/newfile.json";
import * as aggAssault from "../resources/categories/AGG_ASSAULT.json";
import * as autoTheft from "../resources/categories/AUTO_THEFT.json";
import * as burglaryNonres from "../resources/categories/BURGLARY-NONRES.json";
import * as burglaryResidence from "../resources/categories/BURGLARY-RESIDENCE.json";
import * as homocide from "../resources/categories/HOMICIDE.json";
import * as larcenyFromVehicle from "../resources/categories/LARCENY-FROM_VEHICLE.json";
import * as larcenyNonVehicle from "../resources/categories/LARCENY-NON_VEHICLE.json";
import * as rape from "../resources/categories/RAPE.json";
import * as robberyCommercial from "../resources/categories/ROBBERY-COMMERCIAL.json";
import * as robberyPedestrian from "../resources/categories/ROBBERY-PEDESTRIAN.json";
import * as robberyResidence from "../resources/categories/ROBBERY-RESIDENCE.json";

每个文件都是一个犯罪类别。

当我使用它时它可以工作：

function Map() {
            return (
            <>
            <GoogleMap 
            defaultZoom={10}
            defaultCenter= {{lat: 33.8547, lng: -84.38895}}
            >
                {crimeData.crimes.map((crime) => (
                    <Marker key={Math.random()} position = {{lat: parseFloat(crime.lat), lng: parseFloat(crime.long)}} />
                )
                )}
            </GoogleMap>
            </>
            );
        }

        const WrappedMap = withScriptjs(withGoogleMap(Map));

但我需要根据条件将犯罪数据更改为其他文件之一。

我试过这个：

const array= [aggAssault, autoTheft, burglaryNonres, burglaryResidence, homocide, larcenyFromVehicle, larcenyNonVehicle, rape, robberyCommercial, robberyPedestrian, robberyResidence ]

例如，用 array[1] 替换了 crimeDate，我得到了一个错误。该错误是类型错误，我猜它没有将数组 [2] 作为导入的 json 文件关于如何做的任何想法。谢谢。

【问题讨论】：

标签： javascript node.js reactjs json frontend

【解决方案1】：

最好将crimeData设为状态。

基本思想...

interface CrimePoint {
  lat: number
  long: number
}

const crimes = [aggAssault, autoTheft, .. etc]

const [crimeData, setCrimeData] = useState<CrimePoint[]>(crimes[0])

handleSelect(index /* from somewhere */) => {setCrimeData(crimes[index])}

您可能必须使用更复杂的方法来导出索引，例如...

const arrayByType = [
  {
    type: 'aggAssault'
    data: aggAssault
  },
  {
    type: 'autoTheft'
    data: autoTheft
  },
  
]

  // from an input or select
handleSelect(e) => {
  const toFind = e.target.value
  const found = arrayByType.find((el) => (el.type === toFind))
  setCrimeData(found.data)
}

或者...

const crimesAsObj = {
  aggAssault,
  autoTheft,
  // etc.
}

const mapByType = new Map<string, CrimePoint[]>()
for (const [key, value] of Object.entries(crimesAsObj)) {
  mapByType.set(key, value)
}

  // from an input or select
handleSelect(e) => {
  const toFind = e.target.value 
  const data = mapByType.get(toFind)
  setCrimeData(data)
}

【讨论】：