无法运行共享下拉列表的函数

Question

我将我的 api 调用函数作为 prop 从 form.js 文件传递到下拉组件中，以便动态地从数据库检索数据并填充我的下拉选项，如下面的代码所示

<th><Dropdown label="Select Item Type" data={this.state.itemList} api={itemsName} valueCallBack={this.handleItemType}/></th>

“itemsName”是从我的 api 文件导入的函数。 API代码如下：

export var itemsName = async() => {
  var response = await axios.get("http://localhost:9000/itemsName");
  const data = response.data;
  return data.items;
}

这是下拉组件的代码

import react from 'react';
export default class Dropdown extends react.Component{

    constructor(props){
        super(props);
        this.state = {
            data: [],
        }

    };

    shareValue(e){
        this.props.valueCallBack(e.target.value);
    };
    
    componentDidMount(){
        let response = this.props.api()
        this.setState({data: response})
    }

    render(){
            if(this.state.data === null){
                return <div>Loading...</div>
            }
            else{
            return  <>
                        <div className="form-group">
                            <select className="form-control" id="exampleFormControlSelect1" onChange={(e) => this.shareValue(e)}>
                                {
                                    this.state.data.map((item, index) =>
                                    <option key={index}>{item}</option>
                                )}
                            </select>
                        </div>
                    </>
            }
    }
}

但是 React 一直抛出错误“TypeError: this.props.api is not a function”

有人可以帮助我理解我的错误吗？我对此很陌生

Answer 1

在代码中未包含在问题中您正在从

api

导入默认导出：

import demo from "./api";

（对于问题中的代码，您将其称为

itemsName

而不是

demo

。）

但是，

api

没有默认导出。它仅具有命名导出。你可以像这样导入它：

import { demo } from "./api";

---

下一个问题将是你如何使用该功能：

let response = this.props.api()
this.setState({data: response})

api()

是一个

async

函数，因此它返回一个

Promise

。

Promise

对于

render

函数来说不是很有用（并且没有

.map()

函数）。如果您想要该 Promise 的

结果

，那么您需要

await

它或通过

.then()

回调来跟进。例如：

this.props.api().then(response => this.setState({data: response}));