React中向使用展开运算符的组件传递函数报undefined如何解决

• React函数组件仅接收1个props对象作为入参，你将参数拆成两个独立对象接收，导致第二个参数永远为undefined，这是函数未定义的核心原因
  • FoodItem组件的入参写成({foodItem}, {onGetFood})等于仅从第一个props对象中解构了foodItem，onGetFood是从不存在的第二个入参中取值，本身就是undefined，后续调用onGetFood也会报错
  • ChildFoodItem组件的入参写成(food, {getFood})同理，getFood从不存在的第二个入参取值，必然返回undefined
• 不存在「使用展开运算符传递props时不能传递函数」的规则，函数作为普通prop可以正常和其他属性一起传递，和展开运算符没有冲突

//FoodList.jsx
// 所有prop都从同一个入参对象中解构
function FoodItem ({foodItem, onGetFood}) {

    function getFoodItemInfo (food) {
        onGetFood();
        console.log("FOOOD");
    }

    return (
         <ChildFoodItem {...foodItem} getFood={getFoodItemInfo}/>
    );
}

//ChildFoodItem.jsx
// 所有prop都从同一个入参对象解构，展开传入的food属性和getFood都在这个对象中
function ChildFoodItem ({description, getFood, ...otherFoodProps}) {
    
    // 如果需要组件渲染时自动调用getFood，建议放到useEffect中避免每次渲染重复执行，按需开启
    // useEffect(() => {
    //   getFood()
    // }, [getFood])

    return (
    <p className="flex-container">
        {/* First row - Macros */}
        <p className='task flex-child'>
            <Button onClick={(e) => getFood()} style={{font: "bold"}} variant="link">{description} </Button>
        </p>
    </p>
    )
}

• 你把foodItem展开传递给ChildFoodItem后，foodItem的所有属性都会平铺到ChildFoodItem的props上，不需要再单独用food变量存储所有属性，直接按需解构对应的属性（比如description）即可
• 不要把函数调用直接写在组件函数体顶层，否则组件每次重渲染都会触发函数执行，不符合预期的话请放到useEffect或者事件回调中

内容的提问来源于stack exchange，提问作者user12962969