touchableOpacity 中的组件会自动重新渲染，甚至无需传递道具

问题描述

我是本机反应的新手，过去 2 天我一直遇到问题。 我一直在研究一个应用程序。其中用户搜索药物并从其余 API 获取数据并显示结果。当用户点击任何搜索项时，它会导航到另一个包含其详细信息的页面。

但是现在，问题是数据获取成功并显示了初始结果，但是当我点击它的容器以移动到详细信息页面时，它给出了一个错误。

这是父组件的代码。当页面加载时，数据从 API 中获取，然后在第一次尝试中呈现。

index.js
import React,{ useEffect,useState } from 'react';
import { StyleSheet,View,StatusBar,TouchableOpacity,ScrollView,Text  } from 'react-native';
import SearchBar from './searchBar.js'
import SearchResultContainer from './searchResultContainer.js'

export default function searchResult({ route,navigation}) {
  const [searchResult,setReasult] = useState([]);
  const searchItem = route.params.searchItem;

  useEffect(() => {
    async function fetchData(){
      const response = await fetch('API link',{
        method: 'POST',body: JSON.stringify({
          target:searchItem
      })
      });
      const data =  await response.json();
      setReasult(data);
    }
    fetchData()
    
  },[])

   var display;
  if(searchResult.length<1){
     display = <View>
       <Text>Medicine not found</Text>
     </View>
  }
  else{
    display = searchResult.map((each,index)=>{
       return (
        <TouchableOpacity key={index}
          onPress={() => { 
            console.log('hello world');
            navigation.navigate('MedicineDescription',{
              searchItem:each.medicine_name
            })
          }}
        >
      <SearchResultContainer data={each} />
      </TouchableOpacity>
       )
    })
  }
  return (
    <View>
      <StatusBar barStyle="light-content" backgroundColor="#0277bd" />

      <SearchBar />
      <ScrollView>
        {display}
      </ScrollView>

    </View> 
  )
}

这是 touchableOpacity 中 searchResultComntainer 的代码。

searchResultContainer.js
import React from 'react';
import { StyleSheet,Text,Image } from 'react-native';


export default function searchResultContainer(props) {
  const medData = props;
  console.log(medData);
   
  return (
    <View style={styles.container}>
          <View style={styles.imageView}>
             <Image style={styles.image} source={require("../../assets/Medicine.jpg")} />
           </View>
           <View style={styles.detail}>
             <Text style={styles.name}>{medData.medicine_name} </Text>
             <Text style={styles.chemical}>{medData.category_name}</Text>
             <Text style={styles.brand}> {medData.Brand_name} </Text>
           </View>
       </View>
  )
}

上面的组件重新渲染得很好，但是当我们触摸这个组件时，它应该导航到它的描述页面，但这样做可能会重新渲染组件，甚至没有传递道具，因为我收到了一个错误 undefined is not an object evaluating (medData.medicine_name).

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）