Как отобразить реквизит в качестве значения раскрывающегося списка семантической пользовательской реакции? - PullRequest
Новая
       15

Как отобразить реквизит в качестве значения раскрывающегося списка семантической пользовательской реакции?

0 голосов
/ 30 марта 2019

У меня есть функциональный компонент React, который рендерит несколько компонентов Dropdown с семантическим интерфейсом, которые работают нормально, за исключением того, что я не могу заставить их отображать значение, отличное от значения по умолчанию. options работает, onChange работает, но не значение. Мой onChange вызывает избыточное действие для обновления состояния, которое корректно передается моему компоненту.

TeamSelector.js: 

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.availableTeams}
      placeholder={'Select Team'}
      search
      selection
      value={props.homeTeam} />
    {/* another Dropdown here */}
  </div>
)

Если я регистрирую props.homeTeam, я получаю ожидаемое значение, но оно не отображается в моем раскрывающемся списке. Я использую это неправильно? Я проверил официальные документы, но не могу найти ни одного примера использования реквизита в качестве значения, просто укажите состояние.

EDIT По запросу формат availableTeams реквизита: 

[
  { label: 'England', value: 'England' },
  { label: 'Brazil', value: 'Brazil' },
  // more in array
]

Мой редуктор берет value команды и устанавливает его как строку состояния, которая передается как homeTeam на props. Так что я знаю, что options и onChange работают как положено, но в раскрывающемся списке ничего не отображается, если оно отличается от значения по умолчанию.

РЕДАКТИРОВАТЬ 2

Функция редуктора, которая устанавливает команду: 

const setHomeTeam = (state, homeTeam) => {
  const availableTeams = allTeams
    .filter(team => team.value !== homeTeam && team.value !== state.awayTeam)
  return Object.assign(
    {},
    state,
    {homeTeam},
    {availableTeams}
  )
}
...