我正在學習一個關于構建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) =>/span> {
console.log('Update Product'/span>, count, data)。
count 。
if(products[count]) runMutation(products[count])
else {
console.log('Update Complete')。
}
})
}
runMutation( products[count])
}, [products, descriptionValue, titleValue])。
return (
<Page>
<Card>/span>
<TextField
label="Title"/span>
value={titleValue}。
onChange={setTitleValue}。
/>
<TextField
label="Description"。
value={descriptionValue}。
onChange={setDescriptionValue}。
/>
<ResourcePicker
resourceType="Product"/span>
showVariants={false}。
open={pickerOpen}。
onSelection={(資源)=> {
console.log(resource)
setProducts(resource.selection)
}}
/>
<DataTable。
columnContentTypes={[/span>'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>/span>
</Page>>
) }; export default Index;
我沒有發布graphql的突變,因為我認為這只是一個鉤子問題。
uj5u.com熱心網友回復:
你應該在useCallback之后回傳一些jsx
如果這是一個鉤子,把它改名為useIndex,或者任何名字前面帶有use的東西。uj5u.com熱心網友回復:
你應該這樣使用回傳陳述句:
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) =>/span> {
console.log('Update Product'/span>, count, data)。
count 。
if(products[count]) runMutation(products[count])
else {
console.log('Update Complete'/span>)。
setShowToast(true)。
}
})
}
runMutation( products[count])
}, [products, descriptionValue, titleValue])。
return (
<div>
//一些組件
</div>/span>
)
}
export default Index;
作為附帶說明,要匯出該組件并在其他組件中使用它,請使用export default Index
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/310193.html
標籤:
