React渲染JSON数组元素全部显示在单行，如何实现每行渲染一个值？

你当前的写法直接把types数组整体放到JSX中渲染，React会自动将数组转为逗号拼接的字符串，同时你遍历的是最外层的dummyData数组（该数组仅包含1个district对象），所以只会生成1个选项容器，所有类型自然都挤在同一行。

调整遍历逻辑，先拿到types数组再对其内部的每个值单独遍历渲染，同时修正数组map的参数顺序（map第一个参数是当前遍历元素，第二个才是索引），修改后的代码如下：

import React, { useState } from "react";
import './category.css';
import { IoMdArrowDropdown } from 'react-icons/io';
import { GoTriangleUp } from 'react-icons/go';
import dummyData from '../../../json_data/dummy_data.json'

const SearchBox = () => {
    const [open, setOpen] = useState(false);
    const [dropDownValue, setDropDownValue] = useState(null);

    const onSelect = (value) => {
        setDropDownValue(value);
        setOpen(!open);
    };

    // 先取出types数组，如果dummyData有多条district数据，可以根据自己的需求筛选后再取types
    const typeList = dummyData[0]?.types || [];

    return (
        <div className="box_category">
            <div className="category_caption">Categories</div>
            <div className="block_drop">
                <div className="category_dropdown">
                    <div className="category_box">            
                        {dropDownValue === null ? "Enter Category" : dropDownValue}                     
                    </div>
                    <div className="category_dropIcon" onClick={() => setOpen(prev => !prev)}>
                        {open ? <GoTriangleUp size={"22px"} /> : <IoMdArrowDropdown size={"30px"} />}
                    </div>
                </div>
                <div className={open ? "category_option" : "category_option_block"}>
                    {/* 遍历types数组的每个值，单独渲染选项 */}
                    {typeList.map((typeItem, index) => (
                        <div 
                            key={index} 
                            className="select_options" 
                            onClick={() => onSelect(typeItem)}
                        >
                            {typeItem}
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
}

export default SearchBox;

如果你的dummyData后续会包含多个district对象，需要先遍历所有district，再每个district下遍历对应的types列表即可，示例如下：

{dummyData.map((districtItem, districtIndex) => (
  <div key={districtIndex}>
    <div className="district_title">{districtItem.district}</div>
    {districtItem.types.map((typeItem, typeIndex) => (
      <div 
        key={typeIndex} 
        className="select_options" 
        onClick={() => onSelect(typeItem)}
      >
        {typeItem}
      </div>
    ))}
  </div>
))}

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