抱歉,这里是react的新手。我有一些困难,试图通过prop钻传递信息到父组件为了设置值到上下文API,所以我可以传递信息到另一个组件。
我有一个名为foodItem
的数组,它通过onGetFood
函数从App.js传递到下面的组件。我创建了另一个名为getFoodItemInfo
的中间测试函数,将其传递给下一个组件ChildFoodItem
。
//FoodList.jsx
function FoodItem ({foodItem}, {onGetFood}) {
function getFoodItemInfo (food) {
onGetFood();
console.log("FOOOD");
}
return (
<ChildFoodItem {...foodItem} **getFood={getFoodItemInfo}**/>
);
}
//ChildFoodItem.jsx
function ChildFoodItem (food, {getFood}) {
getFood();
return (
<p className="flex-container">
{/* First row - Macros */}
<p className='task flex-child'>
<Button onClick={(e) => getFood()} style={{font: "bold"}} variant="link">{food.description} </Button>
</p>
</p>
)
}
然而,当我试图将getFood
传递给ChildFoodItem
时,我得到的函数是未定义的?是否存在这样一条规则:如果你使用扩展运算符,你就不能对函数进行prop钻取?
您正在尝试解构prop参数,这是组件接收的第一个参数。通过指定多个参数(food, {getFood}
),道具将在food
中结束,并且任何其他参数将未定义。正确的语法应该是:
function ChildFoodItem ({ getFood, ...food })
这将从道具中取出getFood
函数,并将其余的道具放入food
变量中。
有关更多细节,请参阅对象解构中的"Rest"。"解构作业"一节文档。
Issue
React组件只接收一个参数,即props
对象。对于function ChildFoodItem (food, {getFood})
,您试图从未定义的参数中解构getFood
。您命名为food
的道具对象。
<标题>解决方案如果props被传递为:
<ChildFoodItem {...foodItem} getFood={getFoodItemInfo} />
然后getFood
可以显式地解构,而其余的food
道具被扩展到一个名为food
的变量(或任何其他有效的标识符)。
function ChildFoodItem ({ getFood, ...food }) {
getFood();
return (
<p className="flex-container">
{/* First row - Macros */}
<p className='task flex-child'>
<Button onClick={(e) => getFood()} style={{font: "bold"}} variant="link">{food.description} </Button>
</p>
</p>
)
}
标题>