React调用API获取JSON时第二个下拉选择框失效问题排查

问题根因 #

你的代码存在4个直接导致第二个下拉框失效的问题：

1. 语法错误：数组查找缺少find方法，actors.(i => i.id === value)属于非法JS语法，数组按条件查找元素必须调用Array.prototype.find。
2. 数据源访问错误：actors是最外层的数组结构，本身不存在Members属性，你写的actors.Members[0]完全不符合接口返回的结构——Members是每个演员对象下的嵌套数组，必须先拿到当前选中的演员对象，才能访问到对应的成员列表。
3. 匹配字段错误：接口返回的成员数据主键是member_id，不是id，用i.id === value做匹配永远找不到对应成员。
4. JSX结构错误：两个Dropdown组件并列返回时没有外层根节点包裹，会触发JSX编译报错；同时初始状态下actors、selActors为undefined时，直接访问嵌套属性会抛出运行时错误，阻断组件渲染。

修复后完整代码 #

import { useState } from 'react'

export default function Actors() {
    // 数组类型state初始值设为空数组，避免遍历时出现undefined报错
    const [actors, setActors] = useState([])
    const [selActors, setSelActors] = useState()
    const [selMembers, setSelMembers] = useState()
  
    // 此处保留原有的接口请求逻辑，注意接口返回后取res.actors字段存入state
    // useEffect(() => {
    //     fetchActors().then(res => setActors(res.actors))
    // }, [])

    // 派生第二个下拉框的选项源：当前选中演员下的成员列表，未选中演员时为空数组
    const memberList = selActors?.Members ?? []

    return (
        {/* JSX多元素必须用单一根节点包裹，这里用React空标签Fragment */}
        <>
            <Dropdown
                label={selActors?.title ?? '请选择演员'}
                items={actors}
                onSelect={({ value }) => setSelActors(actors.find(i => i.id === value))}
            />
            <Dropdown
                label={selMembers?.name ?? '请选择成员'}
                items={memberList}
                onSelect={({ value }) => {
                    // 从当前选中演员的成员列表中查找匹配项，用member_id做匹配
                    const selected = selActors?.Members?.find(i => i.member_id === value)
                    setSelMembers(selected)
                }}
            />
        </>
    )
}

补充适配说明 #

如果你使用的Dropdown组件要求选项必须是带label/value字段的标准格式，就需要用你提到的map方法做一层数据转换，参考示例：

// 转换演员选项格式
const actorOptions = actors.map(actor => ({
    label: actor.title,
    value: actor.id
}))

// 转换成员选项格式
const memberOptions = memberList.map(member => ({
    label: member.name,
    value: member.member_id
}))

转换完成后把对应Dropdown的items属性换成转换后的actorOptions和memberOptions即可。

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