React Native中依赖请求数据的useState与数据请求如何正确排序

核心思路是严格遵守React Hook的调用规则：所有Hook必须放在组件顶层，不能出现在任何可能触发提前返回的逻辑之后。你可以通过以下步骤调整代码：

1. 将所有useState声明移到loading、error的提前判断逻辑之前
2. 给displayed状态设置初始空数组，避免data未加载时取值报错
3. 新增useEffect监听data的加载状态，请求完成后自动更新displayed的初始值

调整后的代码示例：

const Alarms = () => {
  var { loading, error, data } = useQuery(ALARMS_QUERY)
  // 所有状态声明移到提前return之前
  const [query, setQuery] = React.useState("");
  // 初始值设为空数组，避免data未加载时访问data.alarms.items报错
  const [displayed, setDisplayed] = React.useState([]);

  // 监听data变化，请求完成后更新展示列表
  React.useEffect(() => {
    if (data?.alarms?.items) {
      setDisplayed(data.alarms.items)
    }
  }, [data?.alarms?.items])

  if (loading) return <Text>Loading...</Text>;
  if (error) return <Text>Error :(</Text>;

  ...
}

补充说明 #

• useState的初始值只会在组件第一次渲染时执行一次，所以即使后续data加载完成，也不会自动更新displayed，因此需要搭配useEffect监听data变化触发更新
• 可选的data?.alarms?.items可选链写法，可以避免data/alarms为undefined时的取值报错，你也可以根据实际请求返回的结构调整判断逻辑

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