I have a component that's rendering on page load and then making some calls to get data client side. On initial load everything works as expected. However when i click a see more button to make a new call theres an error in the console saying "rendered more hooks than during the previous render". Does anyone have any input on what can be edited here? Because I am a little lost at this point
Error: Rendered more hooks than during the previous render.
at updateWorkInProgressHook (react-dom.development.js:15115)
at updateMemo (react-dom.development.js:15583)
at Object.useMemo (react-dom.development.js:16055)
at useMemo (react.development.js:1607)
at SecondCall (SecondCall.js:30)
at renderWithHooks (react-dom.development.js:14938)
at updateFunctionComponent (react-dom.development.js:17169)
at beginWork (react-dom.development.js:18745)
at HTMLUnknownElement.callCallback (react-dom.development.js:182)
const SomeItems = (guid) => {
const {
data: dataR,
loading: loadingR,
error: errorR
} = useQuery(
'foo',
{
variables: { guid }
}
);
const list = dataR?.foo?.relatedProducts || [];
const urls = list.map((prod) => prod.url);
const properties = urls.map((url) => url.substr(url.lastIndexOf('/') 1));
const firstvalues = properties.slice(0, 3) || [];
const [flag, setFlag] = useState(false);
return (
<div>
<h4>Shop this Project</h4>
<div id="values">
{
flag
? <SecondCall properties={[properties]} />
: <FirstCall properties={[firstvalues]} />
}
<div>
<button
id="products"
type="button"
onClick={() => setFlag(true)}
>
See More
</button>
</div>
</div>
</div>
);
}
export const SecondCall = ( properties ) => {
const valueArray = Object.values(properties);
const [[destructedValues]] = valueArray;
const {
data,
loading,
error,
} = useQuery(
'foo2',
{
variables:{ value: destructedValues}
}
);
if (!data || loading || error) {
return null;
}
const list = data?.foo2?.prods || [];
const items = list.map((prods) => prods.id);
const {
data: dataFLS,
loading: loadingFLS,
error: errorFLS,
} = useQuery(
'foo3',
{
variables: {items}
}
);
if (!dataFLS || loadingFLS || errorFLS) {
return null;
}
const data = dataFLS?.foo3?.prods || [];
return data.map((products, index) => (
<div key={`prods-${index}`}>
<Row key={`related-products-${index}`}>
"some divs get rendered with data"
</Row>
</div>
);
};
export const firstCall = ( firstvalues ) => {
const valueArray = Object.values(firstvalues);
const [[destructedValues]] = valueArray;
const {
data,
loading,
error,
} = useQuery(
'foo2',
{
variables: { value: destructedValues}
}
);
if (!data || loading || error) {
return null;
}
const list = data?.foo2?.prods || [];
const items = list.map((prods) => prods.id);
const {
data: dataFLS,
loading: loadingFLS,
error: errorFLS,
} = useQuery(
'foo3',
{
variables: {items}
}
);
if (!dataFLS || loadingFLS || errorFLS) {
return null;
}
const data = dataFLS?.foo3?.prods || [];
return data.map((products, index) => {
return (
<div key={`prods-${index}`}>
<Row key={`related-products-${index}`}>
"some divs get rendered with data"
</Row>
</div>
);
);
};
CodePudding user response:
In your SecondCall component, you return null in an if statement. But since useQuery is a hook, all useQuery statements need to be run before you return anything.
const {data, loading, error} = useQuery('foo2', {
variables:{ value: destructedValues}
})
const list = data?.foo2?.prods || [];
const items = list.map((prods) => prods.id);
const {data: dataFLS, loading: loadingFLS, error: errorFLS} = useQuery('foo3', {
variables: {items}
});
if (!data || loading || error || !dataFLS || loadingFLS || errorFLS) {
return null;
}
Edit: Apparently you use two useQuery statements in FirsCall too. The same logic applies there.