错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。【我还在用函数组件】答案

【问题标题】：Error: Invalid hook call. Hooks can only be called inside of the body of a function component. [I am still using function component]错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。【我还在用函数组件】
【发布时间】：2021-11-11 17:22:41
【问题描述】：

我正在学习有关构建 Shopify 应用的教程，但出现错误：

无效的钩子调用。

错误发生在useMutation

const Index = () => {
  const [updateProduct] = useMutation(PRODUCT_UPDATER);
  const submitHandler = useCallback(() => {
    let count = 0;
    const runMutation = (product) => {
      updateProduct({
        variables: {
          input: {
            descriptionHtml: `${product.descriptionHtml}${descriptionValue}`,
            title: `${product.title}${titleValue}`,
            id: product.id,
          },
        },
      }).then((data) => {
        console.log('Update Product', count, data);
        count++;
        if (products[count]) runMutation(products[count]);
        else {
          console.log('Update Complete');
        }
      });
    };
    runMutation(products[count]);
  }, [products, descriptionValue, titleValue]);
  return (
    <Page>
      <Card>
        <TextField label="Title" value={titleValue} onChange={setTitleValue} />
        <TextField label="Description" value={descriptionValue} onChange={setDescriptionValue} />
        <ResourcePicker
          resourceType="Product"
          showVariants={false}
          open={pickerOpen}
          onSelection={(resource) => {
            console.log(resource);
            setProducts(resource.selection);
          }}
        />
        <DataTable
          columnContentTypes={['text', 'text', 'text', 'text', 'text']}
          headings={['ID', 'Old title', 'New title', 'Old description', 'New description']}
          rows={productTableDisplayData}
        />
        <Button primary disabled={!productTableDisplayData.length} onClick={submitHandler}>
          Submit
        </Button>
      </Card>
    </Page>
  );
};

export default Index;

我没有发布graphql mutation，因为我认为这只是一个钩子问题。

【问题讨论】：

标签： node.js reactjs express graphql shopify-app

【解决方案1】：

你应该在 useCallback 之后返回一些 jsx

如果这是一个钩子，将其重命名为 useIndex，或任何名称前带有 use 的名称

【讨论】：