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 (将#修改为@)