Reactjs 如何防止useLayoutEffect定义的按钮函数在渲染后自动执行

在带有

React Navigation 5.x

的

React Native 0.61.5/React 16.9.0

应用程序中，标题中的按钮使用

Navigation.setOptions

在

useLayoutEffect

中定义。以下是功能组件Chat中的代码部分：

useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Button onPress={handleAddPicture()} title="Image Picker" />  //handleAddPicture is defined in the same component
      ),
    });
  }, []);

useEffect(() => {
  //retrieve data from backend server
}, [])

useLayoutEffect（（）=>{
navigation.setOptions({
头灯：（）=>(
//handleAddPicture在同一组件中定义
),
});
}, []);
useffect（（）=>{
//从后端服务器检索数据
}, [])

---

useLayoutEffect

用于在标题中添加一个按钮，供用户在本地文件系统上拾取图像。问题是，一旦渲染组件，就会自动单击图像选择器按钮，并调用

handleddpicture

函数。如何防止执行

handleAddPicture

自动执行？

您的问题非常简单，您只需自己不调用

handleAddPicture

。当按下按钮时，将调用绑定到onPress的代码，因此您只需从中删除括号，它就可以工作了

useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Button onPress={handleAddPicture} title="Image Picker" />  //handleAddPicture is defined in the same component
      ),
    });
  }, []);

useEffect(() => {
  //retrieve data from backend server
}, [])|

useLayoutEffect（（）=>{
navigation.setOptions({
头灯：（）=>(
//handleAddPicture在同一组件中定义
),
});
}, []);
useffect（（）=>{
//从后端服务器检索数据
}, [])|

请注意，如果您想自己调用该函数或执行该函数调用以外的其他操作，也可以这样使用它

        <Button onPress={()=>handleAddPicture()} title="Image Picker" />  //handleAddPicture is defined in the same component

handleAddPicture（）}title=“图像选择器”/>//handleAddPicture在同一组件中定义

正如上面@ZacharyHaber所说的，您只需更改

按钮
组件
onPress
处理程序即可。当您以以下形式将函数传递到一个
onPress
中时，
onPress={handlePress（）}
告诉React调用该函数

每当你想让一个组件可以通过某个函数点击，而不是在挂载时调用它时，你只需要通过排除（）来传递对该函数的引用，即
onPress={handlePress}
。同样的概念也适用于通过道具将函数传递给子组件等