React NativeiosFlatlist无法将数据绑定到可点击项也发送导航参数

如何解决React NativeiosFlatlist无法将数据绑定到可点击项也发送导航参数

我正在渲染一个FlatList,其中所有的项目都是可单击的,并使用(Item ID)通过参数导航到第二个活动屏幕。一次,屏幕呈现了平面列表,并且导航工作正常,但是一旦我单击该项目,导航到第二个活动,回到第一个活动,单击另一个项目,然后我仅导航到上一个项目的活动。其他所有项目也会发生这种情况。我对所有项目都保持静态活动。这是代码-

主要活动

    function HomeScreen ({ navigation }) {
    
                  const [user,setUser] = useState(true);
                  const [homeData,setHomeData] = useState('');
                  const forceUpdate = useForceUpdate();
                
                    useEffect(() => {
              fetch('URL',{
                            method:"POST",headers: {
                            'Content-Type': 'application/json'
                          },body:JSON.stringify({
                            "nameValuePairs":
                            {"username":`${GLOBAL.DATA}`,}})
                          })
                          .then((response) => response.json())
                          .then((json) => {
                            setHomeData(json)
                              console.log(homeData)
                            })
                          .catch(error => console.log(error))
                          console.log('Data Fetched')
                        }
                        fetchData()
                  },[])
    
    return (
    <FlatList
              data={homeData}
              extraData={homeData}
              keyExtractor={(item,index) => index.toString()}
              renderItem={({ item,index }) => (
                <TouchableOpacity
                key={index}
                  onPress={() => {navigation.navigate('Second Activity',{
                    ItemFour: item.ItemFour,})}}
                >   
                  <Card
                    ItemOne={item.ItemOne} 
                    ItemTwo={item.ItemTwo} 
                    ItemThree={item.ItemThree} 
                  />
                </TouchableOpacity>
              )}
            />
    )


**SecondActivity**

    function SecondActivity ({ route,navigation }) {
        const { ItemFour } = route.params
        const [data,setData] = useState('');
        
        
        useEffect(() => {
            async function fetchData() {   
             await fetch('URL',{
                     method:"POST",headers: {
                     'Content-Type': 'application/json'
                   },body:JSON.stringify({
                    "nameValuePairs":
                    {
                        "Item":ItemFour}})
                   })
                   .then((response) => response.json())
                   .then((data) => {
                     setData(data)
                   }) 
                   .catch(error => console.log(error))
                 }
                 console.log(data)
                 fetchData()
           },[])
    return(
            <FlatList
                    data={data}
                    keyExtractor={(item,index) => index.toString()}
                    renderItem={({ item,index }) => (
                        <TouchableOpacity
                            key = {index}
                                onPress={() => navigation.navigate('Complete')}
                        >
                            <Text>ItemFive<Text>
                            <Text>{item}<Text> 
//Data does not change over here when I switch to different item from Main Activity
                        </TouchableOpacity>
                    )}
                />
    )

JSON数据(主要活动)

[
  {
   "ItemOne" : "1"
   "ItemTwo" : "2"
   "ItemThree" : "3"
   "ItemFour" : "4"
  },{
   "ItemFive" : "5"
   "ItemSix" : "6"
   "ItemSeven" : "7"
   "ItemNine" : "8"
  },]

JSON数据(第二个活动)

[
 {
  "1" : "One" //will always depend on the parameter
  "2" : "Two"
  "3" : "Three"
  "4" : "Four"
  "5" : "Five"
 }
]

第二活动数据不会根据MainActivity提供的数据进行更改。

我尝试了什么?

  • 地图无法使用状态数据
  • Flatlist-react的工作方式与本机一样
  • 使用extraData不变

请帮助。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


依赖报错 idea导入项目后依赖报错,解决方案:https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错:更换其他版本 无法下载依赖可参考:https://blog.csdn.net/weixin_42628809/a
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
错误1:gradle项目控制台输出为乱码 # 解决方案:https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
错误还原:在查询的过程中,传入的workType为0时,该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
解决方案1 1、改项目中.idea/workspace.xml配置文件,增加dynamic.classpath参数 2、搜索PropertiesComponent,添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
删除根组件app.vue中的默认代码后报错:Module Error (from ./node_modules/eslint-loader/index.js): 解决方案:关闭ESlint代码检测,在项目根目录创建vue.config.js,在文件中添加 module.exports = { lin
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
错误1:Request method ‘DELETE‘ not supported 错误还原:controller层有一个接口,访问该接口时报错:Request method ‘DELETE‘ not supported 错误原因:没有接收到前端传入的参数,修改为如下 参考 错误2:cannot r
错误1:启动docker镜像时报错:Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法:重启docker -&gt; systemctl r
错误1:private field ‘xxx‘ is never assigned 按Altʾnter快捷键,选择第2项 参考:https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2:启动时报错,不能找到主启动类 #
报错如下,通过源不能下载,最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
错误1:maven打包报错 错误还原:使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
错误1:服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
错误1:运行项目后报如下错误 解决方案 报错2:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案:在pom.
参考 错误原因 过滤器或拦截器在生效时,redisTemplate还没有注入 解决方案:在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-