React JS-如何显示2个下拉列表并显示来自静态json的数据

我是新来的 我有两个下拉列表：国家和城市。 我想在静态json的帮助下展示基于国家的城市 有人能帮我带路吗

 [
  {
    "id": "1",
    "country": "India",
    "cities": [
      {
        "id": "01",
        "cityName": "Delhi"
      },
      {
        "id": "02",
        "cityName": "Mumbai"
      },
      {
        "id": "03",
        "cityName": "Pune"
      }
    ]
  },
  {
    "id": "2",
    "country": "Canada",
    "cities": [
      {
        "id": "01",
        "cityName": "Toronto"
      },
      {
        "id": "02",
        "cityName": "Ottawa"
      },
      {
        "id": "03",
        "cityName": "Winnipeg"
      }
    ]
  }
]

import * as React from 'react'; import * as styles from './App.module.scss'; const App = () => { return ( <div className={styles.app}> <div> <span>Country: </span> <select> <option>Select Country</option> </select> </div> <div> <span>City: </span> <select> <option>Select Country</option> </select> </div> </div> ); }; export default App;

[
{
“id”：“1”，
“国家”：“印度”，
“城市”：[
{
“id”：“01”，
“城市名称”：“德里”
},
{
“id”：“02”，
“城市名称”：“孟买”
},
{
“id”：“03”，
“城市名称”：“浦那”
}
]
},
{
“id”：“2”，
“国家”：“加拿大”，
“城市”：[
{
“id”：“01”，
“城市名称”：“多伦多”
},
{
“id”：“02”，
“城市名称”：“渥太华”
},
{
“id”：“03”，
“城市名称”：“温尼伯”
}
]
}
]
从“React”导入*作为React；从“./App.module.scss”导入*作为样式；const App=（）=>{return（国家：选择国家/地区城市：选择国家/地区）；}；导出默认应用程序；

只需为

下拉列表

国家/地区将方法设置为

onchange

，并在该方法中按所选国家/地区过滤城市

const data = "your JSon"
@computed get countries(){
.map(item => {
return <option key ={item.country.id}> {item.country.name} </option>
}
}
let cities : [];

@computed get cities(){
if(this.cities == null || this.cities == undefined)
return null;

this.cities.map(item => {
return <option key ={item.id}> {item.name} </option>
}
}

countryChange(){
this.cities = data.filter(item => {return item.country === "your value"})[0].cities
}

<select onchange= {this.countryChange}> {this.countries} </select>
<select onchange= > {this.cities } </select>

const data=“您的JSon”
@计算得到的国家（）{
.map（项目=>{
返回{item.country.name}
}
}
让城市：[]；
@计算机获取城市（）{
if（this.cities==null | | this.cities==未定义）
返回null；
此.cities.map（项=>{
返回{item.name}
}
}
countryChange（）{
this.cities=data.filter（item=>{return item.country===“your value”}）[0]。cities
}
{这个国家}
{this.cities}

尝试类似的方法，并将数据作为道具传入。您应该根据需要进行重构，使其更通用

class SelectComponent extends Component {

  state = {country: 0, cityName: 0};

  clicked = () => { console.log("clicked") };

  handleChange = (key, ev) => {
    let newState = { [key]: parseInt(ev.target.value) };

    //reset city to 0 if country changes
    if(key !== "cityName") {
        newState.cityName = 0;
    }

    this.setState(newState);
  };

  render() {

    const { data } = this.props;

    const select = (title, data, fieldName) => {
        return (
            <div>
                <span>{title}:</span>
                <select onChange={(event) => this.handleChange(fieldName, event)}>
                    {data.map((value, key) =>
                      <option value={key}
                              selected={this.state[fieldName] === key}
                      >
                        {value[fieldName]}
                      </option>)
                    }
                </select>
            </div>);
  };

    return (
        <div className={styles.app}>
            {
                [select("Country", data, "country"), select("City", data[this.state.country].cities, "cityName")]
            }
        </div>
    );
  }
};

class SelectComponent扩展组件{
州={国家：0，城市名称：0}；
clicked=（）=>{console.log（“clicked”）}；
手柄更换=（钥匙，电动车辆）=>{
让newState={[key]：parseInt（ev.target.value）}；
//如果国家/地区发生变化，则将城市重置为0
如果（键！=“cityName”）{
newState.cityName=0；
}
this.setState（newState）；
};
render（）{
const{data}=this.props；
常量选择=（标题、数据、字段名）=>{
返回(
{title}：
this.handleChange（字段名，事件）}>
{data.map（（值，键）=>
{value[fieldName]}
)
}
);
};
返回(
{
[选择（“国家”，数据，“国家”），选择（“城市”，数据[this.state.Country].cities，“cityName”）]
}
);
}
};

---

import*as React from'React'；import*as style from./App.module.scss'；const App=（）=>{return（国家：选择国家城市：选择国家）；}；导出默认应用程序；我没有时间编写完整的代码，但这是您应该做的。首先将json字符串转换为JObject，然后处理该对象以创建带有键值（国家为键值）的

Touple

，然后再创建（城市列表为键值）然后将它们设置为状态。然后将该状态值绑定到组件，并在更改国家/地区选择时触发处理程序，该处理程序将更新状态。[ts]属性“cityName”在类型“{[x:number]：number；}”上不存在。任何-获取此错误