在 react-native 中，如何正确排序取决于数据的数据获取和 useState

Question

我是 react-native 新手，如果这是一个愚蠢的问题，我深表歉意。

我有以下代码（只显示相关部分）：

const Alarms = () => {

  var { loading, error, data } = useQuery(ALARMS_QUERY) // this line fetches data with Apollo Client
  if (loading) return <Text>Loading...</Text>;
  if (error) return <Text>Error :(</Text>;

  const [query, setQuery] = React.useState("");
  const [displayed, setDisplayed] = React.useState(data.alarms.items)

  ...
}

query 和 setQuery 用于管理用户在搜索栏中键入的查询的状态。 display 和 setDisplayed 用于管理过滤项目的状态，这些项目将在搜索栏下方显示为 FlatList。

这给出了一个错误：

比上一次渲染时渲染了更多的钩子

我知道这是因为我将状态管理放在了两个 if 语句之后。但是，如何解决这个问题？我不能将状态管理放在 if 语句之前，因为它取决于数据的存在。

有人可以帮助我吗？谢谢！

Answer 1

const Alarms = () => {

  var { loading, error, data } = useQuery(ALARMS_QUERY) // this line fetches data with Apollo Client
 const [query, setQuery] = React.useState("");
 const [displayed, setDisplayed] = React.useState("")

  useEffect(()=> {
if(data){
  setDisplayed(data.alarms.items)
}

                 }, [data])


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

 

  ...
}

你可以先将显示的状态设置为空字符串，如果数据是异步来的，你可以稍后用useEffect设置。