Как предотвратить автоматическое выполнение функции кнопки, определенной useLayoutEffect, после рендеринга

Question

В приложении React Native 0.61.5/React 16.9.0 с React-Navigation 5.x кнопка в заголовке определяется с 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 используется для добавления кнопки в заголовок, чтобы пользователь мог получить изображение в локальной файловой системе. Проблема в том, что как только компонент визуализируется, кнопка выбора изображения автоматически каким-то образом нажимается и вызывается функция handleAddPicture. Как предотвратить автоматическое выполнение handleAddPicture?

Answer 1

Как сказал @ZacharyHaber выше, вам нужно просто изменить обработчик Button component onPress. Когда вы передаете функцию в onPress в следующей форме onPress={handlePress()}, вы говорите React вызвать эту функцию.

Всякий раз, когда вы хотите сделать компонент кликабельным с какой-либо функцией, но не вызывать его при монтировании, вам нужно просто передать ссылку на функцию, исключив (), то есть onPress={handlePress}. Эта же концепция применима и к передаче функций через реквизиты дочерним компонентам и т. Д. c.

Answer 2

Ваша проблема довольно проста, вам просто не нужно звонить 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
}, [])|

Обратите внимание, что вы также можете использовать его следующим образом, если Вы хотите вызвать функцию самостоятельно или выполнить другие действия, кроме одного вызова этой функции.

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