我在React Native应用中有一个组件，它显示待定好友列表。该组件向API发出GET请求，以检索待定好友列表，然后使用useEffect钩子Map列表，并将每个好友呈现为Pressable组件。我还使用useFocusEffect钩子在屏幕呈现时发出get请求。
下面是该组件的相关代码：

const Pending = () => {
  const [pendingFriends, setPendingFriends] = useState(null)
  let pendingFriendsRender = []

  useEffect(() => {
    if (pendingFriends !== null) {
      for(let i = 0; i < pendingFriends.length; i++) {
        pendingFriendsRender.push(
          <Pressable  key={i} style={styles.friend}>
            <Text style={styles.friendText}>{pendingFriends[i].username}</Text>
          </Pressable>
        )
      }
    }
  }, [pendingFriends])

  useFocusEffect(
    useCallback(() => {
      async function fetchData() {
        const accessToken = await AsyncStorage.getItem('accessToken')
        try {
          const res = await instance.get('/pending_friends', {
            headers: { authorization: `Bearer ${accessToken}`},
          })
          setPendingFriends(res.data)
        } catch (error) {
          console.log(error.response.status)
        }
      }
      fetchData()
    }, [])
  )

  return(
    <View style={styles.friendsContainer}>
      {pendingFriendsRender}
    </View>
  )
}

我试过使用一个空数组作为useEffect钩子的第二个参数，但是这个方法不起作用。我也试过删除useEffect钩子，这样if语句和for循环就可以放在没有钩子的组件的顶部，这个方法起作用了，但是在组件渲染之后我不能用这种方法更新它。我检查了API，它返回了正确的数据。