如何将数据填充到reactjs中表格列api内呈现的下拉列表中答案

【问题标题】：How to populate data onto a dropdown rendered inside a table column api in reactjs如何将数据填充到reactjs中表格列api内呈现的下拉列表中
【发布时间】：2019-12-16 20:43:31
【问题描述】：

我正在尝试使用单个 api 请求填充表中的所有下拉列表。

我正在尝试开发一个表单门户。其中一页有一个表格，在几列上有下拉菜单。该表具有添加行和删除行功能。现在我正在尝试使用 api 调用填充表中的下拉列表（特别是 4）。 api 调用成功获取要填充到状态变量的数据。但是由于我使用单个类来调用和渲染函数，所以我无法将数据渲染到相应的列。如何将 this.state.backupof 中的数据呈现到第一列的选择标签中。请帮帮我...

export default class EditableTable extends React.Component {
  componentDidMount() {
    axios
    .get(`http://xx.xx.x.xxx:8000/backup_request/dropdown`)
    .then(response=>response.data)
    .then(data=>{this.setState({backupof: data.backup_of_list});
                 this.setState({servertypelist:data.server_type_list});
                 this.setState({frequencylist:data.frequency_list});
                 this.setState({backupdrivelist:data.backup_drive})
                 console.log(this.state.backupof,"axios worked");});
  }
  constructor(props) {
    super(props);
    this.state = {
      data:[],
      backupof:[],
    servertypelist:[],
    frequencylist:[],
    backupdrivelist:[],
    };
    this.columns = [
      {
        title: 'Backup Of',
        dataIndex: 'backupOf',
        align:'center',
        render: (select, record) =>

          this.state.dataSource.length >= 1 ? (
                    <Select defaultValue='Select' name='backupOf' >
                      {this.state.backupof.map(person => (
                      <Option value={person.name} label={person.name} key={person.name}>
                      {person.name}
                      </Option>
                       ))}
                    </Select>) : null

      },
}

【问题讨论】：

标签： javascript html reactjs api

【解决方案1】：

修复它... 我在父表单中调用了 api，然后将值传递给子表。

                        <Select defaultValue='Select' name='requestType'>
                            {this.props.requesttypedrop.map(person => (
                                <Option value={person.name} label={person.name} key={person.name}>
                                  {person.name}
                                </Option>
                             ))} 
                        </Select>

这是父级中的 api 调用

componentDidMount() {
    axios
    .get(`http://xx.xx.x.xxx:8000/asset_request/request_type_dropdown/`)
    .then(response=>response.data)
    .then(data=>{this.setState({request_type:data.request_type_list});
                this.setState({required_type:data.server_type_list});
                this.setState({asset_type:data.frequency_list});
                this.setState({loading:false});
              })
    .catch(error => {console.log(error);});
  }

这是时间问题。这样做解决了它。

【讨论】：