React中部分绑定函数未通过props传递到Modal组件问题排查

问题根因 #

你在父组件Main中调用UploadModal子组件时，仅传递了stateProps、handleClose、handleShow三个属性，没有将已绑定this的uploadFile函数作为prop传递给子组件，因此子组件的props对象中不存在uploadFile字段，调用时就会抛出props.uploadFile is not a function的错误。

解决方案 #

1. 补充uploadFile属性传递 #

修改Main.js中UploadModal组件的调用代码，新增uploadFile的props绑定：

render(){
    return(
        <div>
        <Button id="button" onClick={this.handleShow}>Upload</Button>
        <UploadModal
            stateProps={this.state}
            handleClose={this.handleClose}
            handleShow={this.handleShow}
            uploadFile={this.uploadFile}
           />
        </div>
    )
}

2. 修正组件名大小写问题 #

React组件名大小写敏感，Modal.js中定义的组件名为UploadModal，但Main.js中调用时写为Uploadmodal（首字母M小写），需要保持命名一致，避免触发其他隐式报错。

额外优化点 #

1. Main组件中按钮的onClick无需额外包裹箭头函数，你已经在constructor中为handleShow绑定了this，直接赋值onClick={this.handleShow}即可，减少不必要的匿名函数生成。
2. 你贴出的Modal.js代码缺少return语句，实际运行时会报错，补充后参考代码如下：

function UploadModal(props){
  return (
    <Modal show={props.stateProps.foo} onHide={props.handleClose} style={{opacity:1}} >
        <Modal.Header closeButton>
            <Modal.Title>Upload File</Modal.Title>
        </Modal.Header>
        <Modal.Footer>
            <Button variant="secondary" onClick={props.handleClose}>
                Cancel
            </Button>
            <Button variant="primary" onClick={props.uploadFile}>
                Ok
            </Button>
        </Modal.Footer>
    </Modal>
  )
}

内容的提问来源于stack exchange，提问作者Dewan Arun Singh