时间戳

首页 > 解决方案 > DropDown 不填充来自 API 调用的数据

reactjs - DropDown 不填充来自 API 调用的数据

问题描述

我是 React 的新手。我正在尝试进行 api 调用，并将数据填充到下拉列表中以做出反应。api 调用成功，我也可以在网络选项卡中看到响应。但响应没有填充到下拉列表中。

我想将 json 响应中的“abc”、“def”等填充到我的下拉列表中。

API 响应

{
   {
    “ABC”: {
        "detail": "/diagnosticWorkflows/abc”
    },
    “DEF”: {
        "detail": "/diagnosticWorkflows/def”
    },
    “LMN”: {
        "detail": "/diagnosticWorkflows/lmn”
    },
    “PQR”: {
        "detail": "/diagnosticWorkflows/pqr”
    }
}

用户界面代码

class ABC extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      diagnosticWorkflow: [],
      selectedWorkflow: ""
    };
  }

  componentDidMount(nextProps) {
    api
      .workflowsApi("https://localhost:8443/api/diagnostic-workflows/")
      .then(res => {
        let workflowFromApi = Object.keys(res).map(workflow => {
          return { value: workflow, label: workflow };
        });

        this.setState({
          diagnosticWorkflow: [
            { value: "", label: "(Select Your Workflow)" }
          ].concat(workflowFromApi)
        });
      })
      .catch(error => {
        Console.log(error);
      });
  }

  render() {
    return (
      <div className={style.searchComponents}>
        <div className={style.searchFilter}>
          <label>
            <span>Diagnostic Requests</span>
          </label>
          <Dropdown
            auto={false}
            source={this.state.diagnosticWorkflow}
            allowBlank={false}
            value={this.state.selectedWorkflow}
            onChange={this.updateSearchParameters.bind(
              this,
              "selectedWorkflow"
            )}
            className={style.searchFilterDropdown}
          />
        </div>
      </div>
    );
  }
}

标签： reactjs

解决方案

 let workflowFromApi = Object.keys(res).map(workflow => {
          return { value: workflow, label: workflow };
        });

您的此代码可能无法正常工作，因为 res is {{....}}Object.keys(res)将为空。你能做出这样的回应吗

{   
    “ABC”: {
        "detail": "/diagnosticWorkflows/abc”
    },
    “DEF”: {
        "detail": "/diagnosticWorkflows/def”
    },
    “LMN”: {
        "detail": "/diagnosticWorkflows/lmn”
    },
    “PQR”: {
        "detail": "/diagnosticWorkflows/pqr”    
    }
}

这样，您的 Object.keys(res) 将返回一个键数组。

推荐阅读