Question

我正在努力了解如何最好地组织代码以在React中设置初始useState（），同时使用GraphQL和Apollo引入数据。这是我的代码。如您所见，我想查看“数据”的一部分以设置初始状态，但是当我将setSTate移动到加载和错误行下方时，出现以下错误：

React Hook“ useState”被有条件地调用。在每个组件渲染中，必须以完全相同的顺序调用React Hook。提早归还后，您是否不小心打了个React Hook？ react-hooks / rules-of-hooks

我应该如何更好地组织此活动？我是否必须使用Apollo的状态管理库，因为我宁愿使用React的useState挂钩。

const GET_LATEST_POSTS = gql`
query {
"graphql query is in here"
}

...

const Slider = () => {

const { data, loading, error } = useQuery(GET_LATEST_POSTS)

if (loading) return 'Loading...'
if (error) return `Error! ${error.message}`

const [ currentMovie, setMovie ] = useState(data)
}

Answer 1

您可以像这样在React中使用useEffect

const Slider = () => {

    const { data, loading, error } = useQuery(GET_LATEST_POSTS)
    const [ currentMovie, setMovie ] = useState(undefined);

    useEffect(() => {
        if(loading === false && data){
            setMovie(data);
        }
    }, [loading, data])

    if (loading) return 'Loading...'
    if (error) return `Error! ${error.message}`
    // you can check if the currentMovie is undefined and use it to return something
    if(currentMovie) return `Movie ... do something with the currentMovie`

    }

Answer 2

您早早返回后是否意外呼叫了React Hook？

您的错误已在上一行中说明。

根据钩子规则，在组件返回某些内容后，不应调用useState。

const Slider = () => {

const { data, loading, error } = useQuery(GET_LATEST_POSTS)


const [ currentMovie, setMovie ] = useState()

 useEffect(() => {
    if(!loading && data){
        setMovie(data);
    }
  }, [loading, data])

if (loading) return 'Loading...'               //your component's return should always be after all hook calls//
if (error) return `Error! ${error.message}`
}

如何在Apollo / GraphQL和React中使用useState和useQuery？

2 个答案: