从异步箭头函数返回JSX

Question

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

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

编辑：

实际上，我必须在列表视图中显示用户的配置文件图像。所以，我调用这个函数来检索我的渲染（）{返回}块中相应用户的图像

这很有效

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

但事实并非如此

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"}
            />
        );
    };

Answer 1

请不要使用。然后（）与异步/等待你要么使用链接或异步的方式。

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"}
            />
        );
    };

另外，handleProfilePhoto返回一个promise。

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