Javascript React——循环遍历json文件，根据属性进行过滤，如果满足该条件，则获取另一个属性

我有一个

UScsvjson.json

文件，其中包含美国各州每个县从开始日期到结束日期的新冠病毒病例。这就是它的外观（大部分）

当我说“州”时，我指的是美国的一个州，不要与美国的州混淆

我想让用户从下拉菜单中选择一个美国州，然后基于该美国州，在另一个下拉菜单中检索该美国州的所有县，如下所示：

因此，“County”下拉列表将包含Autaga、Baldwin等。本质上，一个包含json的所有

Admin2

属性的下拉列表，假设相应json元素的

Province\u State

与用户在上一个下拉列表中选择的美国州匹配

以下是我目前为

UnitedStates.js

:

我假设它源于

JSON.parse

，但我不确定如何修复它，或者如何读取

.JSON

文件

表单逻辑可能有点混乱。目前，我只希望能够进行json解析，并在此基础上构建React组件

---

非常感谢

创建react应用程序包括

json加载程序

模块（以前），现在在

网页>=2

中，可以导入json

您应该将导入更改为

从“/us_data/UScsvjson.json”导入数据

然后将代码更改为：

  const countyListForState = data
    .filter((state) => (selectedState === state.Province_State))
    .map((state) => state.Admin2);

您正在使用create react应用程序吗？@RobertTirta Yes这是否回答了您的问题？
import React from "react";
import * as data from "./us_data/UScsvjson.json";


const CountyList = ({ selectedState, data }) => {

  const countyListForState = JSON.parse(data)
    .filter((state) => (selectedState === state.Province_State))
    .map((state) => state.Admin2);


/*my logic: parse the .json file. filter based on the objects with the same 
Province_State property as our selected US state. 
construct an array of these objects, lets call it US_Object_State_array.
then map each object in the US_Object_State_array to another new array containing only the counties,
and this array will be countyListForState.
then we will construct multiple <option> tags for every county in this array.
*/

  return (
    <div>
      <label>county: </label>
      <select>
        {countyListForState.map((county) => (
          <option value={county.Admin2}>{county.Admin2}</option>
        ))}
      </select>
    </div>
  );
};

const StateList = () => {

/* below is the dropdown of states. this will be changed in the future to follow the same logic
as above. for right now, I just render 50 <option> elements, one for every US state*/

  return (
    <div>
      <label>state: </label>
      <select>
        <option value="default" selected>
          Select a state
        </option>
        <option value="Alabama">Alabama</option>
        {/*... 48 US states later ...*/
       <option value="Wyoming">Wyoming</option>
      </select>
    </div>
  );
};

const UnitedStates = () => {
  return (
    <div className="dashboard">
      <div className="title">COVID-19 state and county visualizer</div>
      <div className="instructions">
        select a state and county to see charts and data about how COVID-19 has
        affected it from as early as January 2020 to present day.
      </div>
      <form
        onSubmit={() => {
          console.log("Working");
        }}
      >
        <StateList state={"enter state"} />
        <CountyList selectedState={"Alabama"} data={data} />
        <button type = "submit">submit</button>
      </form>
    </div>
  );
};
export default UnitedStates;

TypeError: Cannot convert object to primitive value

  2 | import * as data from "./us_data/UScsvjson.json";
  3 | 
  4 | const CountyList = ({ selectedState, data }) => {
> 5 |   const countyListForState = JSON.parse(data)
  6 |     .filter((state) => selectedState === state.Province_State)
  7 |     .map((state) => state.Admin2);
  8 | 

  const countyListForState = data
    .filter((state) => (selectedState === state.Province_State))
    .map((state) => state.Admin2);