如何在 react native 中将值从 promise 传递给组件 prop？

Question

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

我正在尝试将用户最后一条消息传递给 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
    />
  );

Answer 1

如果ListItem 期望看到它的subtitle 属性的承诺，你只能这样做，我猜它不会。 ;-)（猜测是因为我还没有玩过 React Native。React，但不是 React Native。）

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

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

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

Answer 2

如果“最后一条消息”是特定于 ListItem 组件的内容，而不是您手头的内容，您可能希望让列表项自行发出网络请求。我会将函数移到ListItem 中。您需要设置一些状态来保存该值，并可能进行一些条件渲染。然后，您需要在安装组件时调用此函数。我假设您正在使用功能组件，所以useEffect() 应该在这里帮助您：

//put this is a library of custom hooks you may want to use
//  this in other places
const useIsMounted = () => {
  const isMounted = useRef(false);
  useEffect(() => {
    isMounted.current = true;
    return () => (isMounted.current = false);
  }, []);
  return isMounted;
};

const ListItem = ({
  title,
  bottomDivider,
  chevron,
  onPress,
  id, //hae to pass id to ListItem
}) => {
  const [lastMessage, setLastMessage] = useState(null);
  const isMounted = useIsMounted();
  React.useEffect(() => {
    async function get() {
      const m = await fireStoreDB.getUserLastMessage(
        fireStoreDB.getUID,
        id
      );
      //before setting state check if component is still mounted
      if (isMounted.current) {
        setLastMessage(m);
      }
    }
    get();
  }, [id, isMounted]);

  return lastMessage ? <Text>DO SOMETHING</Text> : null;
};

Answer 3

我通过在 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
    />
  );