Javascript 异步函数中的图像源？

我试图呈现一个在异步函数中被调用的图像，但是没有根据API数据响应分配该值

代码：

从“React”导入React；
从“react native”导入{TouchableOpacity}；
从“反应本机矢量图标/唯物主义者”导入图标；
从“反应本机矢量图标/材料通信图标”导入Icon2；
从“axios”导入axios；
从“/styles”导入{容器，左，化身，信息，名称，时间}；
导出默认函数约会（{data}）{
asd=async（）=>{
const user=data.item.userLogin.toLowerCase（）；
const response=等待axios.get(
`https://api4.successfactors.com/odata/v2/Photo?$filter=tolower（userId）eq'${user}`，
{
认证：{
用户名：“Apiuser”，
密码：“Apipass”，
},
}
);
const encodedData=response.data.d.results[0].photo.toString（）；
console.log（encodedData）；
返回编码数据；
};
返回(
{console.log（this.asd（））}
{data.item.userOnDesk}{'\n'}（{data.item.userLogin}）
Prédio:{data.item.Predio}
Mesa:{data.item.Desk}
{data.item.Andar}:Andar
{}}>
);
}

如何在执行返回之前加载变量？我需要将渲染图像的方法设置为异步，如果我将“约会”函数设置为异步，它将不起作用。

如果调用

this.asd（）

您将只渲染

[object Promise]

，因为

asd

是一个异步函数，它返回一个承诺

您需要在

useffect（（）=>{/*loado the photo*/}，[]）中加载照片。

导出默认函数约会（{data}）{
const[uri，setUri]=React.useState（“”）
React.useffect（（）=>{
常量asd=async（）=>{
const user=data.item.userLogin.toLowerCase（）；
const response=等待axios.get(
`https://api4.successfactors.com/odata/v2/Photo?$filter=tolower（userId）eq'${user}`，
{
认证：{
用户名：“Apiuser”，
密码：“Apipass”，
},
}
);
const encodedData=response.data.d.results[0].photo.toString（）；
console.log（encodedData）；
setUri（encodedData）；
};
建筑署（）
}, [])
返回(
...
)
}

为什么它不起作用

asd（）是一个异步函数。这意味着，它将返回一个承诺，而不是值（base64字符串）。阅读更多关于这方面的信息

如何解决它

好的，您可以执行

${等待这个.asd（）}

。因为您使用的是wait，所以必须使render（）异步。但这在中国是不可能的。此外，您将在每个组件重新渲染器上重新蚀刻数据

更好的方法是将数据置于组件的状态：

//您可以提供一个默认值作为useState（）的参数
const[avatarSrc，setAvatarSrc]=React.useState（“”）；
//要检索该值，请执行以下操作：
.
@JonathanMazaia如果这解决了您的问题，请不要忘记将答案标记为已接受，谢谢！
import React from 'react';

import { TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import Icon2 from 'react-native-vector-icons/MaterialCommunityIcons';
import axios from 'axios';
import { Container, Left, Avatar, Info, Name, Time } from './styles';

export default function Appointments({ data }) {

  asd = async () => {
    const user = data.item.userLogin.toLowerCase();
    const response = await axios.get(
      `https://api4.successfactors.com/odata/v2/Photo?$filter=tolower(userId) eq '${user}'`,
      {
        auth: {
          username: 'Apiuser',
          password: 'Apipass',
        },
      }
    );
    const encodedData = response.data.d.results[0].photo.toString();
    console.log(encodedData);
    return encodedData;
  };

  return (
    <Container>
      <Left>
        <Avatar
          source={{
            uri: `data:image/png;base64,${this.asd()}`,
          }}
        />
        {console.log(this.asd())}
        <Info>
          <Name>
            {data.item.userOnDesk} {'\n'}({data.item.userLogin})
          </Name>
          <Time>
            <Icon2 name="office-building" size={20} color="#000" />
            Prédio: {data.item.Predio}
          </Time>
          <Time>
            <Icon2 name="chair-school" size={20} color="#000" />
            Mesa: {data.item.Desk}
          </Time>
          <Time>{data.item.Andar} ºAndar</Time>
        </Info>
      </Left>
      <TouchableOpacity onPress={() => {}}>
        <Icon name="person" size={20} color="#005BAF" />
      </TouchableOpacity>
    </Container>
  );
}


export default function Appointments({ data }) {
  const [uri, setUri] = React.useState('')  

  React.useEffect(() => {
    const asd = async () => {
      const user = data.item.userLogin.toLowerCase();
      const response = await axios.get(
        `https://api4.successfactors.com/odata/v2/Photo?$filter=tolower(userId) eq '${user}'`,
        {
          auth: {
            username: 'Apiuser',
            password: 'Apipass',
          },
        }
      );
      const encodedData = response.data.d.results[0].photo.toString();
      console.log(encodedData);
      setUri(encodedData);
    };
    asd()
  }, [])

  return (
      ...
      <Avatar
        source={{
          uri: `data:image/png;base64,${uri}`,
        }}
      />
  )

}