React渲染JSON ward值下拉框仅显示3项原因及解决方法咨询

你现在代码只渲染出3个值的核心原因是遍历逻辑错误：

1. 你只遍历了JSON最外层的3个地区对象，没有遍历每个地区对象下嵌套的ward_no数组
2. Array.map的参数顺序搞反了：Array.map(当前遍历元素, 索引)，你代码里写的(key, values)实际第一个参数是当前地区对象，第二个是外层遍历的索引（值为0、1、2）
3. 你取值时用dummyData[values].ward_no[values].ward，相当于每次取外层索引对应位置的地区下、相同索引位置的ward值，刚好对应：

• 索引0：第1个地区的第1个ward → 6
• 索引1：第2个地区的第2个ward →10
• 索引2：第3个地区的第3个ward →15
  这就是你看到的3个值的排列规律，完全是索引巧合导致的，不是你要的全部ward值。

你需要嵌套遍历：先遍历所有地区，再遍历每个地区下的所有ward_no项，就能拿到全部9个ward值，修改渲染部分代码即可：

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

const WardNo = () => {
    const [open, setOpen] = useState(false);
    const [wardNumber, setWardNumber] = useState(null);

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

    return (
        <div className="ward_no">
            <div className="ward_caption">Ward No</div>
            <div className="ward_block">
                <div className="ward_dropdown">
                    <div className="ward_box">
                        {wardNumber === null ? "Enter Ward Number" : wardNumber}
                    </div>
                    <div className="ward_dropIcon" onClick={() => setOpen(prev => !prev)}>
                        {open ? <GoTriangleUp size={"25px"} /> : <IoMdArrowDropdown size={"30px"} />}
                    </div>
                </div>
                <div className={open ? "ward_option" : "ward_option_block"}>
                    {/* 嵌套遍历拿到所有ward值 */}
                    {dummyData.map((district, districtIdx) => 
                        district.ward_no.map((wardItem, wardIdx) => (
                            <div 
                                key={`${districtIdx}-${wardIdx}`}
                                className="ward_options" 
                                onClick={() => onSelect(wardItem.ward)}
                            >
                                {wardItem.ward}
                            </div>
                        ))
                    )}
                </div>
            </div>
        </div>
    );
}

export default WardNo;

如果觉得嵌套遍历可读性差，也可以先把所有ward值提取为一维数组再渲染：

// 组件内先提取所有ward值
const allWards = dummyData.flatMap(district => district.ward_no.map(item => item.ward))

// 渲染时直接遍历一维数组即可
{allWards.map((ward, idx) => (
    <div key={idx} className="ward_options" onClick={() => onSelect(ward)}>
        {ward}
    </div>
))}

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