为什么我收到 Rendered more hooks 错误？答案

【问题标题】：Why I'm getting Rendered more hooks error?为什么我收到 Rendered more hooks 错误？
【发布时间】：2022-12-20 05:07:53
【问题描述】：

我想知道我在这里做错了什么。

我收到此错误：“渲染的钩子比上一次渲染时多。”

export default function ProductDetails() {
    //Use State
    const {qty, increaseQty, decreaseQty, onAdd, setQty} = useStateContext();

    //Reset Qty

    useEffect(() => {
        setQty(1);
    }, []);
    //Fetch Slug
    const {query} = useRouter();
    //Fetch Graphql data
    const [results] = useQuery({
        query: GET_PRODUCT_QUERY,
        variables: {slug: query.slug}
    })
    const {data, fetching, error} = results;
     //Check for data coming in
    if(fetching) return <p>Loading...</p>;
    if(error) return <p>Oh no....</p>;
    //Extract Product Data
    const {title,description, image, gallery } = data.products.data[0].attributes;
    const [img, setImg] = useState(gallery.data[0].attributes.formats.medium.url);
    console.log(img);


    //Create a toast 

    const notify = () => {
        toast.success(`${title} added to your cart`, {duration: 1500});
    }

    return(
        <DetailsStyle>
            <Gallery>
                <img src={gallery.data[0].attributes.formats.medium.url} alt={title} />
                <Thumbnails>
                    {gallery.data.map((image, index) => (
                            <SingleThumb key={index} >
                                <img src={image.attributes.formats.thumbnail.url} alt={title} />
                            </SingleThumb>
                        )
                    )}
                </Thumbnails>
            </Gallery>
            <ProductInfo>
                <h3>{title}</h3>
                <p>{description}</p>
                <Quantity>
                    <span>Quantity</span>
                    <button><AiFillMinusCircle onClick={decreaseQty} /></button>
                    <p>{qty}</p>
                    <button><AiFillPlusCircle onClick={increaseQty}/></button>
                </Quantity>
                <Buy onClick={() => {
                    onAdd(data.products.data[0].attributes, qty)
                    notify();
                }}>Add To Cart</Buy>
            </ProductInfo>
        </DetailsStyle>
    )
}

这行有问题：const [img, setImg] = useState();

为什么我不能在这里使用更多的钩子。

有谁知道我为什么得到这个？

【问题讨论】：

将此行 const [img, setImg] = useState(); 移至组件的开头。
我试图将它移到开头，但后来我得到了这个：“ReferenceError：初始化前无法访问‘画廊’”。因为我无法访问我的查询结果。

标签： reactjs react-hooks

【解决方案1】：

您正在使用早return

而这行代码不会每次都执行：

    const [img, setImg] = useState(gallery.data[0].attributes.formats.medium.url);

【讨论】：

【解决方案2】：

这只是有条件的称为：

const [img, setImg] = useState(gallery.data[0].attributes.formats.medium.url);

因为组件有更早的条件返回语句。将它移到函数的前面。（通常我会立即调用 useState 操作。）

Hooks 需要始终在每次渲染时以相同的顺序被调用。

【讨论】：