React函数组件中semantic-ui-react Dropdown无法显示Prop值的问题

看起来你遇到的核心问题是：选中球队后，该球队被从availableTeams中过滤移除了，导致Dropdown的options数组里找不到匹配value的选项，因此无法渲染显示选中值。

为什么会出现这个问题？ #

你的setHomeTeam reducer函数里，会把当前选中的homeTeam和已选的awayTeam从availableTeams中过滤掉：

const availableTeams = allTeams
.filter(team => team.value !== homeTeam && team.value !== state.awayTeam)

而你直接把这个过滤后的availableTeams传给了Dropdown的options属性。当homeTeam被选中后，它已经不在options数组里了——semantic-ui-react的Dropdown要求value必须对应options数组中某一项的value，否则就算props.homeTeam的值正确，也找不到对应的label来渲染显示内容，最终就会出现"选中后无内容显示"的情况。

解决方案：保留完整选项列表，用禁用状态替代移除 #

我们不需要从选项数组里删除已选球队，而是把它们设置为disabled（不可选），这样既能保证Dropdown找到匹配value的选项来显示，又能防止重复选择。

1. 调整组件中的Dropdown配置

修改Dropdown的options，基于完整的球队列表（比如新增props.allTeams，把全量球队数组作为prop传给组件），给已选的球队添加disabled属性：

import React from 'react'
import { Dropdown } from 'semantic-ui-react'

export default props => ( 
  <div className="choose-team">
    <span className="team-label">Home</span>
    <Dropdown 
      className="team-select-home" 
      onChange={(_, data) => props.setHomeTeam(data.value)} 
      {/* 基于全量球队生成选项，禁用已选的客队 */}
      options={props.allTeams.map(team => ({
        ...team,
        disabled: team.value === props.awayTeam
      }))} 
      placeholder={'Select Team'} 
      search 
      selection 
      value={props.homeTeam} 
    />
    {/* 客队Dropdown同理，禁用已选的主队 */}
    <span className="team-label">Away</span>
    <Dropdown 
      className="team-select-away" 
      onChange={(_, data) => props.setAwayTeam(data.value)} 
      options={props.allTeams.map(team => ({
        ...team,
        disabled: team.value === props.homeTeam
      }))} 
      placeholder={'Select Team'} 
      search 
      selection 
      value={props.awayTeam} 
    />
  </div>
)

2. 简化Reducer逻辑

现在不需要在reducer里过滤availableTeams了（除非你有其他业务场景需要这个过滤后的数组），只需要更新选中的球队值即可：

const setHomeTeam = (state, homeTeam) => {
  return Object.assign(
    {}, state,
    { homeTeam }
    // 移除原有的availableTeams过滤逻辑
  )
}

// 对应的客队设置函数同理
const setAwayTeam = (state, awayTeam) => {
  return Object.assign(
    {}, state,
    { awayTeam }
  )
}

验证效果 #

修改后：

• 选中主队后，客队Dropdown会自动禁用该主队，避免重复选择
• 主队Dropdown始终保留全量球队选项，props.homeTeam对应的选项存在，因此能正常显示选中值
• onChange事件和Redux状态更新逻辑依然正常工作

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