在 ReactJS 中使用带有钩子的回调会返回"not a function"

Question

我正在使用ReactJS开发一个网站，并且正在使用Material UI组件。由于Material UI使用了很多钩子，至少对于这个项目，到目前为止我使用了相同的方法。但是，在设置数据库时，我想将回调从一个组件传递到另一个组件。类的传统方法是绑定一个函数并传递它。但是，对于钩子，我没有"这个"可以绑定。我试着简单地通过它。

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

^这就是我使用路由器-反应-DOM所做的(AFAIK这是将props传递给路由组件的官方解决方案)。但是，当 receiveData 函数"到达"另一个组件并且我尝试通过 props.dataCallback() 访问它时，我收到一个错误，表明结果不是函数。

到目前为止，我已经研究了文档，我发现的第一个"解决方案"是使用 useEffect。但是，每当重新渲染 DOM 时都会调用 useEffect，我只需要在单击按钮时调用它。我已经研究了其他钩子，如useContext，但没有成功。

Answer 1

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

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

我刚刚做了

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

我不完全确定为什么这有效，但我很高兴。将查看文档，但我怀疑"props"被视为一个对象，并将我的函数放在那里使它看起来像我希望它是一个对象。