Reactjs 从异步箭头函数返回JSX

它必须是基本的，但请帮助我理解为什么这不起作用

当我编写一个普通的arrow函数并返回jsx时，它就工作了。但是，当我使用async/await请求和相同的arrow函数返回jsx时，它失败了

编辑：

---

实际上，我必须在列表视图中显示用户的配置文件图像。因此，我调用此函数来检索

render（）{return}

块中各个用户的图像

这很有效

handleProfilePhoto = firstName => {
        return (
            <img
                className="comment-img"
                src={require("../../../../Webroot/images/dashboard/image3.png")}
                alt={firstName + " profile"}
            />
        );
    };

handleProfilePhoto=firstName=>{
返回(
);
};

而这并不是

handleProfilePhoto = async (firstName) => {
        let err = false;

        await Axios
            .get(MY_URL)
            .then(function () {
                err = false;
            })
            .catch(function () {
                err = true;
            });

        return err === true ? (
            <img
                className="comment-img"
                src={require("../../../../Webroot/images/dashboard/image3.png")}
                alt={firstName + " profile"}
            />
        ) : (
            <img
                className="comment-img"
                src={require("../../../../Webroot/images/dashboard/image4.png")}
                alt={firstName + " profile"}
            />
        );
    };

handleProfilePhoto=async（firstName）=>{
让错误=错误；
等待Axios
.get（我的URL）
.然后（函数（）{
错误=错误；
})
.catch（函数（）{
错误=正确；
});
返回err==true(
) : (
);
};

请不要使用

。然后（）

与

async/wait

一起使用链接或异步方式

handleProfilePhoto = async (firstName) => {
        let err = false;
      
        try {
           await Axios.get(MY_URL);
        } catch(err) {
           err = true;
        } 
        return err === true ? (
            <img
                className="comment-img"
                src={require("../../../../Webroot/images/dashboard/image3.png")}
                alt={firstName + " profile"}
            />
        ) : (
            <img
                className="comment-img"
                src={require("../../../../Webroot/images/dashboard/image4.png")}
                alt={firstName + " profile"}
            />
        );
    };

---

try{var result=await Axios.get（MY_URL）；返回成功的jsx；}catch（err）{return err jsx；}

一定要将异步请求从渲染中拆分，您应该将调用分离并将状态传递到component@mahdimahzouni，你能说出正确的语法吗。如果我在替换参数后实现了您的代码，则不会work@JasonMcFarlane，你能给我看一些片段吗？请给我一个错误。它表示

错误：对象作为React子对象无效（找到：[object Promise]）。如果要呈现子对象的集合，请改用数组。

@Chilarai在何处导入此组件ide

render（）{return…..其余代码…this.handleProfilePhoto（items.firstname）}

如下所示。我希望这是合理的，实际上我必须在列表视图中显示用户的个人资料图像。因此，我调用这个函数来检索各个users@Chilarai

handleProfilePhoto.then(result => {
   //your result is here
})