Блог

У меня есть flatlist с функцией поиска. На следующем шаге я хочу, чтобы что-то происходило, когда я нажимаю внутри элемента. Я сталкиваюсь с проблемой, что TouchableOpacity виден, но при его нажатии ничего не происходит. Я пробовал то же самое с кнопкой и столкнулся с той же проблемой.

Вместо того, чтобы onPress вызывался при нажатии чего-либо, он каким-то образом вызывается сразу после загрузки экрана. Если я, например, console.log(item.title) Я получаю все заголовки в моем журнале консоли, которые в настоящее время находятся в flatlist.

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

У меня есть Flatlist, который заполнен данными, настроен следующим образом:

          return (
          <View style={styles.list}>
            <FlatList
              data = {this.state.data}
              renderItem={renderListItem}
              keyExtractor={item => item.id}
              ListHeaderComponent={this.renderHeader}
              
            />
     
          </View>
        );
      }
    }
    
    
       const renderListItem = (item) => {
        return (
        
          <MyTouchable
            id={item.item.id}
            title={item.item.title}
      
         
          />
        );
      }
  

MyTouchable компонент выглядит следующим образом:

           <View>
       <TouchableOpacity onPress={console.log("Pressed")}>
      <View style={styles.mainView}>
      <View>
       <Text style={styles.text}>{props.id} {props.title}</Text> 
    
       
       </View>
  
      
      </View>
    </TouchableOpacity>
     </View>

  

Попробуйте передать консоль.войдите в функцию со стрелкой

 <TouchableOpacity onPress={() => console.log("Pressed")}>
 ...
</TouchableOpacity>
  

Вы не можете писать так : <Component makeThing={myFunc()} /> . Вы должны написать так: <Component makeThing={() => myFunc()} /> если вы не используете useCallback .

Обязательно прочитайте документы о передаче функций компонентам. Вы должны предоставить функцию со стрелкой и вызвать свою функцию внутри нее. Или просто используйте useCallback крюк:

 const Component = () => {
  const myFunction = useCallback(() => {
    // do something
  }, []);
  return <AnotherComponent coolFunction={myFunction} />
}