React-native await useEffect 函数

Question

我想从 Firestore 中检索一个字段，但我怎么能说等到 useEffect 的函数完成后才返回？

这是我的代码：

useEffect(() => {
      handlClick();
  }, []);

  const handlClick = async() => {
    setRestaurant([]);
    db.doc(idBranch).get().then(data => {
        const branchData = data.data();
        setRestaurant(brn => [...brn, branchData]);
    })
  }

  return (
    <View>
        <Text> Name: {restaurant.Name} </Text>
    </View>
  );

Answer 1

这段代码可能会有所帮助：

const [isHandleClickCall, setHandleClickCall] = useState(false);

useEffect(() => {
    (async () => {
        await handlClick();
        setHandleClickCall(true);
    })();
}, []);

const handlClick = async () => {
    setRestaurant([]);
    db
        .doc(idBranch)
        .get()
        .then((data) => {
            const branchData = data.data();
            setRestaurant((brn) => [...brn, branchData]);
        });
};

return (
    isHandleClickCall && (
        <View>
            <Text> Name: {restaurant.Name} </Text>
        </View>
    )
);