React组件传参后调用setIsLoading报错，组件定义存疑求助

你的问题出在React函数组件的参数定义方式上：

React函数组件只会接收一个参数——包含所有传入属性的props对象，而不是分开的多个参数。你现在的写法：

const Item = (product, setIsLoading) => {
    //....
    setIsLoading(true);
}

这里的product其实是整个props对象（包含了你传入的...item和setIsLoading），而第二个参数setIsLoading是undefined，所以调用时才会报setIsLoading is not a function的错误。

修正方法 #

直接从props对象里解构出需要的属性和方法即可，有两种常用写法：

写法1：直接在参数里解构

// 如果需要把product相关属性单独提取，也可以明确解构，比如{ id, name, price, setIsLoading }
const Item = ({ ...product, setIsLoading }) => {
    // 现在可以正常调用setIsLoading了
    setIsLoading(true);
    // ...其他组件逻辑
}

写法2：先接收props，再内部解构

const Item = (props) => {
    const { setIsLoading } = props;
    // product相关属性可以通过props.id、props.name等访问，或者解构出来
    const product = { ...props };
    delete product.setIsLoading; // 可选，把setIsLoading从product对象里移除

    setIsLoading(true);
    // ...其他组件逻辑
}

之前没加setIsLoading时组件能正常运行，是因为那时候你把整个props对象当成了product来使用，刚好...item的属性都在这个对象里，所以没出问题。但加了新的属性后，错误的参数定义就导致了问题。

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