React传入对象属性的函数未被识别为函数的报错排查

报错的核心是属性访问层级写歪了：

• 你传入的options是数组，数组本身没有setter属性，直接写options.setter拿到的是undefined，把undefined当函数调用自然会报xxx is not a function的错。
• 你贴的子组件代码里写的是options[0].setter，如果真跑这段代码，报错信息会明确指向options[0].setter，说明你实际运行的代码和贴出来的不一致，大概率是写调用逻辑时漏了数组下标，直接在options根层级取setter了。
• 就算你补对了下标，现在传参写的options.typeId也是错的——typeId是数组里每个对象的属性，不是数组本身的属性，这里会传个undefined进去，不符合你insertDocument接收文件名作为第一个参数的预期。

把属性访问的层级改对就行，最稳妥的写法是先把要操作的数组项存成变量，避免反复写索引搞错层级：

function SelectableUploadField({ options }) {
    function handleClick() {
        const currentOption = options[0];
        // 从当前选项对象上取setter和typeId，不会写错层级
        currentOption.setter(currentOption.typeId, { name: 'myDocument', type: 'pdf' })
    }

    return(
        <button onClick={handleClick}>Click me</button>
    )
}

• 你父组件里每次渲染都会新建一次options数组，会导致子组件跟着不必要的重渲染，建议用useMemo把options包起来缓存。另外insertDocument函数最好也用useCallback包裹，避免依赖变化导致缓存失效。
• 父组件里给SelectableUploadField传了organisation属性，但是贴出来的代码里没看到这个变量的定义，记得补全，不然会报organisation is not defined的错。

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