Подготовьте семантическое раскрывающееся меню с первым значением: React + Typescript

Question

Я пытаюсь заполнить раскрывающийся список семантической пользовательской реакции первым значением (из параметра options).Но я не могу сделать то же самое.Значения для этого раскрывающегося списка Я извлекаю его из серверной части и затем сопоставляю его с форматом, поддерживаемым semantic-ui-реагировать на выбор.

Помощь будет принята с благодарностью.

  //state object
   this.state = {
                  users: [] ,
                  selectedUser: '',
                  defaultUser: string
   }
  //fetch call to get the values and then transforming 
  async componentDidMount()
  {
      try {       
             let data = await fetch('/api/fetch/users')
             let users =  await data.json();
             users = users.map((obj:any) => ({            //formatting the list to support options array of semnatic-ui-react select
                                              key: obj.id,
                                              text: obj.name,
                                              value: obj.name
                                        }));
             this.setState({users},defaultUser: users[0].value); //setting the dropdown with first value, but it is not happening

     }
     catch(e){
         console.log('Error', e.message);
     }
  } 


   //onchange handler
   dropdownChange = (event: React.SyntheticEvent<HTMLElement>, data:any) => {
     this.setState(prevState => ({
                [data.name]: data.value
     }));
    }

  //Inside render, Select

   <Select 
                             options={this.state.users} 
                             name="selectedUser"  
                             value={this.state.selectedUser}
                             onChange={this.dropdownChange}  
                             defaultValue = {this.state.defaultUser}  
   />

Answer 1

Я думаю, что вам не нужна поддержка по умолчанию.Вы можете проверить коды и поле ниже.Я использовал ответные крючки, но вы поняли.

https://codesandbox.io/s/heuristic-wiles-eq7su

Для вашего конкретного кода:

import React from "react";
import ReactDOM from "react-dom";
import { Select } from "semantic-ui-react";


class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      users: [],
      selectedUser: ""
    };
  }
 async componentDidMount(){
  try {       
         let data = await fetch('/api/fetch/users')
         let users =  await data.json();
         users = users.map((obj:any) => ({
                                          key: obj.id,
                                          text: obj.name,
                                          value: obj.name
                                    }));

         this.setState({users}, () => {
            this.setState({selectedUser: this.state.users[0].value});
         })

 }

  //onchange handler
  dropdownChange = (event, data) => {
    this.setState({ selectedUser: data.value });
  };

  render() {
    return (
        <Select
          onChange={this.dropdownChange}
          placeholder="Select a user"
          value={this.state.selectedUser}
          selection
          options={this.state.users}
        />
    );
  }
}