React Native添加工单后ActiveTickets组件不刷新问题求助

问题背景 #

我正在开发一个票务应用，期望添加新工单后，页面中的ActiveTickets组件能自动刷新展示最新工单列表，但目前实现后组件并未重新加载。

相关代码片段 #

页面组件核心代码 #

return (
    <View className="flex-1 m-0 bg-secondary">
      <ActiveTickets
        key={tickets?.length}
        tickets={tickets}
        viewTicket={viewTicket}
      />
      <CreateTicket
        input={input}
        setInput={setInput}
        submitCreateTicket={submitCreateTicket}
      />
    </View>
  );

从Context获取状态与方法 #

const { createTicket, tickets, isLoadingTicket, getTickets } =
    useContext(TicketContext);

页面首次加载时获取工单列表 #

useEffect(() => {
    if (isAuthorizeUser() && !isDataLoaded) {
      getTickets(userInfo.data.id, userInfo.data.token.access);
      setIsDataLoaded(true);
    } else {
      router.replace("/");
    }
  }, []);

提交新工单的处理函数 #

const submitCreateTicket = () => {
    const roomID = uuid.v4();

    createTicket(
      roomID,
      input.title,
      input.description,
      userInfo.data.id,
      userInfo.data.token.access
    );
    getTickets(userInfo.data.id, userInfo.data.token.access);
  };

Context中的getTickets函数实现 #

const getTickets = (user_id, token) => {
    setIsLoadingTicket(true);
    axios
      .get(`${BASE_URL}/tickets/${user_id}`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      })
      .then((res) => {
        if (res.status == 200) {
          setTickets(res.data);
          setIsLoadingTicket(false);
        }
      })
      .catch((e) => {
        console.log(`ticket reqister error ${e}`);
        setIsLoadingTicket(false);
      });
  };

已尝试的解决方案及遇到的问题 #

• 尝试通过useEffect监听tickets变量变化，但未产生预期效果：

useEffect(()=>{
      // 未实现有效逻辑
},[tickets]);

• 修改首次加载useEffect的依赖项为[getTickets,isDataLoaed,userInfo.data.id]后，出现了无限请求服务器的循环问题。

内容的提问来源于stack exchange，提问作者Nawanug gunawaN