异步IsFollowing函数返回值在Text组件内判断始终为true如何解决

问题原因 #

• IsFollowing是异步函数（async函数），所有async函数执行后默认返回的是Promise实例对象，而非函数内部return的布尔值。
• JSX渲染过程是同步执行的，你没有对返回的Promise做await处理，永远拿不到内部的布尔结果。且JS中对象类型做布尔判断时永远为真值，因此IsFollowing(item.item._id) == true的判断永远成立，所以组件始终显示Unfollow。

修复方案 #

你需要把异步请求到的关注状态存储到组件状态中，依赖状态触发重渲染来展示正确文案，参考实现如下：

1. 定义状态存储关注状态映射 #

// 函数组件内部
const [followStatusMap, setFollowStatusMap] = useState({});
// 存储结构为 { [用户ID]: 布尔值（是否关注） }

2. 封装请求并更新状态的方法 #

const fetchFollowStatus = async (followID) => {
  const { data: follow } = await client.query({
    query: QUERY2,
    variables: {
      user_id: userID,
      follow_id: followID
    },
    fetchPolicy: 'network-only',
  });
  setFollowStatusMap(prev => ({
    ...prev,
    [followID]: follow.isFollowing
  }));
};

3. 列表项加载时触发状态查询 #

在渲染列表项的逻辑中，新增副作用触发请求，避免重复请求：

useEffect(() => {
  const targetId = item.item._id;
  // 未查询过该用户的关注状态时才发起请求
  if (followStatusMap[targetId] === undefined) {
    fetchFollowStatus(targetId);
  }
}, [item.item._id]);

4. 渲染时从状态中取值判断 #

<Text style={tailwind('text-sm text-blue-500')}>
  {followStatusMap[item.item._id] ? 'Unfollow' : 'Follow'}
</Text>

内容的提问来源于stack exchange，提问作者Jose A.