使用第一个值预填充语义下拉列表：React+ Typescript

Question

我正在尝试使用第一个值（来自选项参数）填充语义-ui-反应下拉列表。但我不能这样做。此下拉列表的值我从后端获取它，然后将其映射到语义支持的格式-ui-react select.

不胜感激。

  //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

我认为您不需要 defaultValue 道具。您可以查看下面的代码和框。我使用了 React Hooks 但你明白了。

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}
        />
    );
  }
}

使用第一个值预填充语义下拉列表：React+ Typescript

Prepopulate semantic drop down with first value : React+ Typescript

select

typescript

reactjs

semantic-ui-react