在带有Hooks的ReactJS中使用回调函数会返回“不是函数”

Question

我正在使用ReactJS开发一个网站，并且正在使用Material UI组件。由于Material UI使用了大量的Hook，至少到目前为止，对于该项目，我一直使用相同的方法。但是，在设置数据库时，我想将回调从一个组件传递到另一个组件。类的传统方式是绑定一个函数并直接传递它。但是，使用钩子我没有要绑定的“ this”。我试图简单地通过它。

 <Route path="/signUp/" render={ (receiveData) => <SignUpPage dataCallback={receiveData} /> } /> 

^这是我使用router-react-dom所做的操作（afaik，这是将道具传递到路由组件的官方解决方案）。但是，当receiveData函数“到达”另一个组件时，我尝试访问它通过props.dataCallback（），我收到一个错误，提示结果不是函数。

到目前为止，我已经研究了文档，发现的第一个“解决方案”是使用useEffect。但是，只要重新渲染DOM，就会调用useEffect，而我仅在单击Button时才需要调用它。我研究了其他类似useContext的方法，但没有成功。

Answer 1

用户清晰性提供了解决我问题的答案，但不是

render={ (props) => <SignUpPage dataCallback={receiveData} {...props} /> }

我刚刚做

render={ (props) => <SignUpPage dataCallback={receiveData} /> } />

我不完全确定为什么这样做有效，但是我很高兴。会研究文档，但我怀疑“道具”被视为对象，并且将我的函数放在那里似乎使我希望它成为对象。