React实现汽车品牌下拉筛选时车型全部在同一行的问题求解

问题原因 #

你当前的代码直接将整个车型数组models渲染到了单个<option>标签内，数组在JSX中默认会被转为逗号拼接的字符串，所以所有车型都挤在同一个选项中显示。

解决方法 #

你需要先获取选中品牌对应的车型数组，再遍历该数组为每一个车型单独生成<option>标签即可。

你只需要修改车型下拉框的渲染逻辑即可，修改后的代码如下：

<select>
  {/* 未选中品牌时显示默认提示 */}
  {filterDropdown.length === 0 ? (
    <option value="">请先选择汽车品牌</option>
  ) : (
    // 遍历当前选中品牌的所有车型，单独生成选项
    filterDropdown[0].models.map((modelName, index) => (
      <option key={index} value={modelName}>
        {modelName}
      </option>
    ))
  )}
</select>

修改后选中对应品牌，车型下拉框就会每个车型单独占一个选项，不会全部聚集在同一行。

内容的提问来源于stack exchange，提问作者MaZZa