Javascript 多重<；选项>；逻辑&&；操作人员

我正在尝试创建一个依赖选择框，该框根据父选择列出不同的列表。我假设代码失败是因为选项需要包装在一个容器中，但是如果我不想为每个状态重新创建选项，我不确定它们可以包装在哪个容器中

老实说，我甚至不确定这是最好的解决办法。总的来说，我对反应和JS还是一个新手。这家公司在两个以上的州都有办事处，所以也许有更好的方法来扩大规模？多谢各位

到目前为止，我的代码是：

<select
  className="select"
  name="selectCity"
  onChange={this.onCityChange}
>
  <option value="" defaultValue>Select a City</option>
  {
    this.state.state === 'california' && 
      <option value="los-angeles">Los Angeles</option> 
      <option value="san-diego">San Diego</option> 
  }
  {
    this.state.state === 'texas' && 
      <option value="austin">austin</option> 
      <option value="dallas">Dallas</option> 
  }
</select>

选择一个城市
{
this.state.state==='california'&&
洛杉矶
圣地亚哥
}
{
this.state.state===“德克萨斯州”&&
奥斯汀
达拉斯
}

当您不想在DOM中使用包装元素时，可以使用将元素分组在一起

<select className="select" name="selectCity" onChange={this.onCityChange}>
  <option value="" defaultValue>
    Select a City
  </option>
  {this.state.state === "california" && (
    <React.Fragment>
      <option value="los-angeles">Los Angeles</option>
      <option value="san-diego">San Diego</option>
    </React.Fragment>
  )}
  {this.state.state === "texas" && (
    <React.Fragment>
      <option value="austin">austin</option>
      <option value="dallas">Dallas</option>
    </React.Fragment>
  )}
</select>

选择一个城市
{this.state.state===“california”&&(
洛杉矶
圣地亚哥
)}
{this.state.state==“texas”&&(
奥斯汀
达拉斯
)}

您是对的，即使您可以有多个元素而没有父元素，但由于许多原因，这仍然不是最优的

最好有一个适当的数据结构，并在数据集中循环。例如：

const cities={
加利福尼亚州：[
{值：“洛杉矶”，名称：“洛杉矶”}，
{值：“圣地亚哥”，名称：“圣地亚哥”}
],
德克萨斯州：[
{值：“奥斯汀”，名称：“奥斯汀”}，
{值：“达拉斯”，名称：“达拉斯”}
]
//等等
};

选择一个城市
{cities[this.state.state].map（city=>{city.name}）

在这里，您可以采取几种方法。关注点的分离使代码更具可读性和可维护性。由于没有看到您的其余代码，我不确定如何插入您的组件。你觉得这样的东西怎么样

const cities = {
    'california': {
        'los-angeles': 'Los Angeles',
        'san-diego': 'San Diego',
    },
    'texas': {
        'austin': 'Austin',
        'dallas': 'Dallas',
    },
};

const getOptions = (state) => {
    const cities = Object.keys(cities[state]);
    return cities.map(city => <option value={city}>{cities[city]}</option>);
}

<select
    className="select"
    name="selectCity"
    onChange={this.onCityChange}
>
    <option value="" defaultValue>Select a City</option>
    {
        getOptions(this.state.state);
    }
</select>

const cities={
“加州”：{
“洛杉矶”：“洛杉矶”，
“圣地亚哥”：“圣地亚哥”，
},
“德克萨斯州”：{
“奥斯汀”：“奥斯汀”，
“达拉斯”：“达拉斯”，
},
};
const getOptions=（state）=>{
const cities=Object.key（城市[州]）；
返回cities.map（city=>{cities[city]}）；
}
选择一个城市
{
getOptions（this.state.state）；
}

谢谢JJJ。这就是我的答案，尽管我确实需要在JSX表达式中添加一个逻辑&&运算符，以便在状态选择器未定义时进行计算：This.cities[This.State.State]！=未定义&（城市地图表达式）