錯誤：對象在 reactjs 中作為 React 子對象無效（找到：[object Promise]）

Question

我正在學習 reactjs。 我想在加載列表 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>

        });
}

Answer 1

這里有幾個錯誤。

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
}

Answer 2

問題就在這里

<td className="text-center">{this.findTenloaidv(bpdv.idloaidv)}</td>

findTenloaidv方法返回一個promise因為它是async ，它是對象([object Promise]) 。 這就是為什么 react 會拋出這個錯誤Objects are not valid as a React child 。

您需要在獲取數據時映射貨幣格式。 像這樣嘗試

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,
        })
}

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