Javascript 错误：对象作为React子对象无效（在reactjs中找到：[object Promise]）

我正在学习。加载列表bpdvList时，我想从函数findTenloaidv（id）中获取结果，但出现错误

    async componentDidMount(){
        this.setState({isLoading: true});
        const bangphi = await (await fetch(`/gvnhanh/bangphidv/`)).json();
        this.setState({
                bpdvs: bangphi,
                isLoading: false,
            })
    }

    async findTenloaidv(id){
        const loaidv = await (await fetch(`/gvnhanh/loaidv/${id}`)).json();
        
        return loaidv.tenloai
    }

render(){

        const {bpdvs, isLoading} = this.state;

        const bpdvList = bpdvs.map(bpdv =>{
            return <tr key={bpdv.idbpdv}>
                        <td className="text-center">{bpdv.iddv}</td>
                        <td className="text-center">{this.findTenloaidv(bpdv.idloaidv)}</td>
                        <td className="text-center">{bpdv.tendv}</td>
                        <td className="text-center">{bpdv.mota}</td>
                        <td className="text-center">{this.currencyFormat(bpdv.gia)}</td>
                        <td className="text-center">{bpdv.donvitinh}</td>
                    </tr>

        });
}

异步组件didmount（）{ this.setState（{isLoading:true}）； const bangphi=await（await-fetch（`/gvnhnh/bangphidv/`））.json（）； 这是我的国家({ bpdvs:bangphi， 孤岛加载：false， }) } 异步findTenloaidv（id）{ const loaidv=await（await-fetch（`/gvnhnh/loaidv/${id}`））.json（）； 返回loaidv.tenloai } render（）{ const{bpdvs，isLoading}=this.state； const bpdvList=bpdvs.map（bpdv=>{ 返回 {bpdv.iddv} {this.findTenloaidv（bpdv.idloaidv）} {bpdv.tendv} {bpdv.mota} {this.currencyFormat（bpdv.gia）} {bpdv.donvitinh} }); }

---

这里有几个错误

async componentDidMount(){
    this.setState({isLoading: true});
    const bangphi = await (await fetch(`/gvnhanh/bangphidv/`)).json(); // Here
    const bangphi = await fetch('Your endpoint') //await your fetch data
    const data = await bangphi.json()  // Then convert to json
    this.setState({
            bpdvs: data.bangphi, // changed here
            isLoading: false,
        })
}
// Change this to match 
async findTenloaidv(id){
    const loaidv = await (await fetch(`/gvnhanh/loaidv/${id}`)).json();
    
    return loaidv.tenloai
}

问题就在这里

{this.findTenloaidv（bpdv.idloaidv）}

findTenloaidv

方法返回一个

promise

作为

async

的对象类型

（[objectpromise]）

。这就是为什么react抛出此错误

对象作为react子对象无效的原因

在获取数据时，需要映射货币格式。像这样试试

async componentDidMount(){
    this.setState({isLoading: true});
    const bangphi = await (await fetch(`/gvnhanh/bangphidv/`)).json(); // Here
    const bangphi = await fetch('Your endpoint') //await your fetch data
    const data = await bangphi.json()  // Then convert to json
    const bpdvs = data.bangphi.map(async bpdv => {
       const loaidv = await this.findTenloaidv(bpdv.idloaidv)
       return {
         ...bpdv,
         idloaidv: loaidv.tenloai
       }
    })
    this.setState({
            bpdvs,
            isLoading: false,
        })
}

。。。
{bpdv.iddv}
{bpdv.idloaidv}
....

   ...
    <td className="text-center">{bpdv.iddv}</td>
    <td className="text-center">{bpdv.idloaidv}</td>
   ....