Question

编辑：我不知道拒绝投票的原因，这是一个很好的问题，并且该站点上没有其他问题可以解决我的问题。我只是预加载数据来解决我的问题，但是如果不使用功能组件，那仍然无法解决问题。

我正在尝试将用户的最后一条消息传递到ListItem字幕道具中，但是我似乎找不到找到从promise / then调用返回值的方法。它返回的是promise，而不是给我“失败的道具类型”的值。我曾考虑过使用状态，但是后来我认为我无法再调用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拥有的另一个诺言方法中使用该诺言方法来解决此问题，并将用户的最后一条消息添加为所有用户的额外字段。这样，我将所有用户信息置于一种状态以填充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
    />
  );

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

3 个答案: