React native 如何使用函数更改平面列表的数据？

我有一个数组，其中包含在flatlist中表示的字典。每当我触摸一个组件时，我都希望执行一个函数来更改某些字典的数据。例如：

const data = [
    { duration: null, uri: null, step: 0, index: 0 }
    { duration: null, uri: null, step: 0, index: 1 }
    { duration: null, uri: null, step: 0, index: 2 }
    { duration: null, uri: null, step: 0, index: 3 }
]

const updataData = (duration, uri) => {
    duration = 1000;
    uri = 'jsdbbsljv_sjk_jka'
}

return (
    <View>
        <FlatList
            data={data}
            renderItem={itemData => (
                <View>
                    <TouchableOpacity onPress={() => { updataData(itemData.item.duration, itemData.item.uri); itemData.item.step = itemData.item.step + 1 }} >
                    </TouchableOpacity>
                </View>
            )}
        />
    </View>
    )

const数据=[
{持续时间：null，uri:null，步骤：0，索引：0}
{持续时间：null，uri:null，步骤：0，索引：1}
{持续时间：null，uri:null，步骤：0，索引：2}
{持续时间：null，uri:null，步骤：0，索引：3}
]
const updateadata=（持续时间，uri）=>{
持续时间=1000；
uri='jsdbbsljv_sjk_jka'
}
返回(
(
{updateadata（itemData.item.duration，itemData.item.uri）；itemData.item.step=itemData.item.step+1}>
)}
/>
)

---

这不是我正在使用的代码，但我需要学习的是在平面列表的renderItem之外的函数上更改itemData.item值。我如何才能做到这一点？

通过将数据存储在我们可以动态更改的状态

我们只需在props中传递项目的索引，并更新特定索引上的数据状态

例如

import React, { useState } from "react";
import { View, Text, FlatList, TouchableOpacity } from "react-native";

const App = () => {
  const [data, setData] = useState([
    { duration: null, uri: null, step: 0, index: 0 },
    { duration: null, uri: null, step: 0, index: 1 },
    { duration: null, uri: null, step: 0, index: 2 },
    { duration: null, uri: null, step: 0, index: 3 }
  ]);

  const updataData = (index, duration, uri) => {
    setData((prevData) => {
      return prevData.map((item) => {
        if (item.index === index) {
          return {
            ...item,
            duration: 1000,
            uri: "jsdbbsljv_sjk_jka"
          };
        }
        return {
          ...item
        };
      });
    });
  };

  return (
    <View>
      <FlatList
        data={data}
        renderItem={(itemData) => (
          <View>
            <TouchableOpacity
              onPress={() => {
                updataData(
                  itemData.item.index,
                  itemData.item.duration,
                  itemData.item.uri
                );
                itemData.item.step = itemData.item.step + 1;
              }}
            >
              <Text>{itemData.item.duration || itemData.item.index}</Text>
            </TouchableOpacity>
          </View>
        )}
      />
    </View>
  );
};

export default App;

import React，{useState}来自“React”；
从“react native”导入{视图、文本、平面列表、TouchableOpacity}；
常量应用=（）=>{
const[data，setData]=useState([
{持续时间：null，uri:null，步骤：0，索引：0}，
{持续时间：null，uri:null，步骤：0，索引：1}，
{duration:null，uri:null，步骤：0，索引：2}，
{持续时间：null，uri:null，步骤：0，索引：3}
]);
const updateadata=（索引、持续时间、uri）=>{
setData（（prevData）=>{
返回prevData.map（（项）=>{
如果（item.index==索引）{
返回{
…项目，
持续时间：1000，
uri：“jsdbbsljv_sjk_jka”
};
}
返回{
…项目
};
});
});
};
返回(
(
{
更新数据(
itemData.item.index，
itemData.item.duration，
itemData.item.uri
);
itemData.item.step=itemData.item.step+1；
}}
>
{itemData.item.duration | | itemData.item.index}
)}
/>
);
};
导出默认应用程序；

您应该使用状态来实现这一点（或其他状态管理流；如redux） 使用国家：

const initialData=[
{持续时间：null，uri:null，步骤：0，索引：0}
{持续时间：null，uri:null，步骤：0，索引：1}
{持续时间：null，uri:null，步骤：0，索引：2}
{持续时间：null，uri:null，步骤：0，索引：3}
]
const[data，setData]=useState（initialData）
const updateadata=（持续时间，uri）=>{
持续时间=1000；
uri='jsdbbsljv_sjk_jka'
}
const updateItem=（项目、索引）=>{
const updatedUri=“这里有些东西”
数据[索引]={
…项目，
uri:updatedUri
}
setData（数据）
}
常量renderItem=（{item，index}）=>{
返回(
updateItem（项，索引）}
>
)
}
返回(
)