React Native组件状态更新后不重新渲染问题求助

你的代码核心问题出在用普通变量存储渲染元素+错误使用useEffect构建JSX，React不会追踪普通变量的变化，而且没必要用useEffect来生成渲染内容。

问题根源 #

1. pendingFriendsRender是普通变量，组件每次重渲染都会被重置为空数组。即便你在useEffect里往数组里push元素，React也不会因为这个变量的变化触发重渲染，下一次渲染时这个数组又会回到初始状态。
2. 用useEffect来构建JSX元素是错误的做法，React的渲染逻辑应该直接放在组件的渲染阶段（return语句中或渲染前的计算）。

修正后的代码 #

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

  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()
    }, [])
  )

  // 处理加载状态
  if (!pendingFriends) {
    return <View style={styles.friendsContainer}><Text>加载中...</Text></View>
  }

  return(
    <View style={styles.friendsContainer}>
      {/* 直接在渲染阶段映射数组生成组件 */}
      {pendingFriends.map((friend) => (
        {/* 优先用好友的唯一ID作为key，没有的话再用用户名 */}
        <Pressable key={friend.id || friend.username} style={styles.friend}>
          <Text style={styles.friendText}>{friend.username}</Text>
        </Pressable>
      ))}
    </View>
  )
}

关键修改说明 #

• 移除了多余的pendingFriendsRender变量和对应的useEffect，直接用map方法在return语句中遍历pendingFriends生成Pressable组件，React会自动监听pendingFriends的状态变化，触发组件重渲染。
• 添加了加载状态判断，避免pendingFriends为null时渲染空内容，提升用户体验。
• 优化了错误日志，防止error.response不存在时抛出异常。
• 替换了key值：尽量用每个好友的唯一标识（比如friend.id或friend.username）作为key，而不是数组索引——索引作为key在数组元素顺序变化时会导致React渲染异常。

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