Javascript 如何在react native中将承诺值传递给组件属性？

编辑：我不明白投票被否决的原因，这是一个很好的问题，在这个网站上没有其他问题解决了我的问题。我只是预加载数据来解决问题，但如果不使用功能组件，仍然无法解决问题

我试图将用户的最后一条消息传递到ListItem字幕道具中，但我似乎找不到从promise/then调用返回值的方法。它返回的是一个承诺，而不是给我一个“失败的道具类型”的值。我曾考虑过使用状态，但后来我认为我不能再调用ListItem组件中的函数了

  getMsg = id => {
    const m = fireStoreDB
      .getUserLastMessage(fireStoreDB.getUID, id)
      .then(msg => {
        return msg;
      });
    return m;
  };

  renderItem = ({ item }) => (
    <ListItem
      onPress={() => {
        this.props.navigation.navigate('Chat', {
          userTo: item.id,
          UserToUsername: item.username
        });
      }}
      title={item.username}
      subtitle={this.getMsg(item.id)} // failed prop type
      bottomDivider
      chevron
    />
  );

getMsg=id=>{
常数m=fireStoreDB
.getUserLastMessage（fireStoreDB.getUID，id）
。然后（msg=>{
返回味精；
});
返回m；
};
renderItem=（{item}）=>(
{
this.props.navigation.navigate（'Chat'{
userTo:item.id，
UserToUsername:item.username
});
}}
title={item.username}
subtitle={this.getMsg（item.id）}//属性类型失败
底部分隔器
雪佛龙
/>
);

只有当

ListItem

希望看到其

subtitle

属性的承诺时，才可以这样做，我猜它不会这样做。；-）（猜测，因为我还没有玩React-Native。React，但不是React-Native。）

相反，组件需要有两种状态：

• 字幕尚未加载
• 字幕已加载

---

…并呈现这些状态中的每一个。如果您不希望组件具有状态，那么您需要在父组件中处理异步查询，并且仅当您拥有该组件所需的信息时才呈现该组件。

如果“最后一条消息”仅特定于

列表项

组件，而不是您手头上已有的信息，您可能希望让列表项自己发出网络请求。我会将函数移到

ListItem

中。您需要设置一些状态来保存该值，并可能进行一些条件渲染。然后，您需要在安装组件时调用此函数。我假设您使用的是功能组件，因此

useffect（）

应该可以帮助您：

//这是一个您可能想要使用的自定义挂钩库
//这是在其他地方
常量useIsMounted=（）=>{
const isMounted=useRef（false）；
useffect（（）=>{
isMounted.current=真；
return（）=>（isMounted.current=false）；
}, []);
回报率计算；
};
常量列表项=({
标题
底部分隔器，
雪佛龙，
新闻界，
id，//必须将id传递给ListItem
}) => {
const[lastMessage，setLastMessage]=useState（null）；
const isMounted=useIsMounted（）；
React.useffect（（）=>{
异步函数get（）{
const m=wait fireStoreDB.getUserLastMessage(
fireStoreDB.getUID，
身份证件
);
//在设置状态之前，检查组件是否仍然安装
如果（isMounted.current）{
setLastMessage（m）；
}
}
get（）；
}，[id，isMounted]）；
返回lastMessage？执行某些操作：null；
};

我通过在componentDidMount上的另一个promise方法中使用该promise方法修复了这个问题，并将用户的最后一条消息添加为所有用户的额外字段。这样，我将所有用户的信息都放在一个状态中，以填充ListItem

  componentDidMount() {
    fireStoreDB
      .getAllUsersExceptCurrent()
      .then(users =>
        Promise.all(
          users.map(({ id, username }) =>
            fireStoreDB
              .getUserLastMessage(fireStoreDB.getUID, id)
              .then(message => ({ id, username, message }))
          )
        )
      )
      .then(usersInfo => {
        this.setState({ usersInfo });
      });
  }

  renderItem = ({ item }) => (
    <ListItem
      onPress={() => {
        this.props.navigation.navigate('Chat', {
          userTo: item.id,
          UserToUsername: item.username
        });
      }}
      title={item.username}
      subtitle={item.message}
      bottomDivider
      chevron
    />
  );

componentDidMount（）{
fireStoreDB
.getAllUsersExceptCurrent（）
。然后（用户=>
我保证(
users.map（{id，username}）=>
fireStoreDB
.getUserLastMessage（fireStoreDB.getUID，id）
.then（message=>（{id，username，message}））
)
)
)
。然后（usersInfo=>{
this.setState（{usersInfo}）；
});
}
renderItem=（{item}）=>(
{
this.props.navigation.navigate（'Chat'{
userTo:item.id，
UserToUsername:item.username
});
}}
title={item.username}
subtitle={item.message}
底部分隔器
雪佛龙
/>
);

这是否回答了您的问题@HMR-我认为它比这个稍微具体一点。你可以在解析中使用。如果你不能使用功能组件，那么我发布的链接将告诉你如何使用类组件解决这个问题（只检查代码，你不需要配置babel）@HMR没有，但我最终解决了问题。你忘记了异步：

useffect（async（）=>{

但您也可以执行

fireStoreDB.get（）。然后（setLastMessage）

而忽略async并等待。哎哟，你是对的。尽管它只是语法上的甜点，但当你快速扫描代码时，它是一个很好的视觉标记，可读性更强。你的答案很接近，但应该在设置状态之前检查组件是否存在。效果缺少依赖项（id），并且效果不应该是异步函数（林特会抱怨的）。如果你愿意，我可以调整你的答案。当然，我在手机上，atmI更新了你的答案，没有错误处理或加载消息，但很接近。你正在变异一个值并设置状态，假设getUserLastMessage将以与请求相同的顺序解析（或者列表中用户的顺序并不重要）而且不需要多次设置状态。使用Promise。您只需设置一次状态，就可以按正确的顺序获得响应，并且不需要修改临时值。@HMR我正在使用

getAllUsersExceptCurrent

中的值来设置

getUserLastMessage

，因此我无法将它们都封装在

Promise中。所有

。但是，我确实修复了“多次设置状态”通过使用普通for循环并检查它是最后一个设置状态的项。离合器，@HMR是正确的，问题中的版本可能不可靠（如果您上次对消息的请求在前一个请求之前完成，您将状态设置为premat