React Native: в чем разница между вызовом props.aFunction и props.aFunction () со скобками?

Question

Этот TouchableOpacity компонент: <TouchableOpacity onPress={props.goToDetails()}> принимает реквизиты от своей родительской функции, в этом коде при вызове функции goToDetails мой код работает и показывает правильные результаты только при использовании скобок, а иногда, когда я просто использую имя функции -в классе- код работает без скобок: onPress={this.goToDetails}. Это полный код,

В классе:

render(){
  return (
   <View>
     <MovieList results ={this.state.searchResults} goToDetails={()=>this.goToDetails} /> 
   </View>
)}

goToDetails=()=>{
    this.props.navigation.navigate('Details')
  }

Независимая функция:

const MovieList = props =>{
const renderItem = ({item}) =>(
    <TouchableOpacity onPress={props.goToDetails()}>
        <Image source={{uri:`http://img.omdbapi.com/?apikey=&`}} style={{height:200, width:200}} />
        <Text>Title: {item.Title}</Text>
    </TouchableOpacity>)

return (<FlatList style={{flex:1}} renderItem={renderItem} data={props.results}  />) }

UPDATE: класс, вызывающий MovieList код, TouhcableOpacity код

Answer 1

Вы передаете обратный вызов goToDetails непоследовательно.

Когда вы goToDetails={()=>this.goToDetails} это обратный вызов, который возвращает функцию, поэтому в Movielist, когда он прикреплен к обработчику как onPress={props.goToDetails()}, он должен быть вызывается немедленно, чтобы получить возвращенную функцию, чтобы снова иметь подпись onPress={callbackFn} или onPress={e => callbackFn(e)}.

render(){
  return (
   <View>
     <MovieList
       results={this.state.searchResults}
       goToDetails={this.goToDetails} /> // Pass callback as reference
   </View>
)}

goToDetails=()=>{
  this.props.navigation.navigate('Details')
}

Список фильмов

const MovieList = ({ goToDetails }) =>{
  const renderItem = ({ item }) =>(
    <TouchableOpacity onPress={goToDetails}> // Attach callback to event handler
      <Image
        source={{ uri:`http://img.omdbapi.com/?apikey=&` }}
        style={{ height:200, width:200 }}
      />
      <Text>Title: {item.Title}</Text>
    </TouchableOpacity>
  );

  return (
    <FlatList
      style={{ flex:1 }}
      renderItem={renderItem}
      data={props.results}
    />
  );
}