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

Question

我有一个数组，其中包含以 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>
    )

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

标签： react-nativefunctionreact-native-flatlist

Answer 1

您应该使用状态来执行此操作（或其他状态管理流程；如 redux）使用状态：

const initialData = [
    { 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 [data, setData] = useState(initialData)

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

const updateItem = (item, index) => {
  const updatedUri = "something here"
  data[index] = {
  ...item,
  uri: updatedUri
  }
  setData(data)
  
}


const renderItem = ({item, index}) => {
  return (
  <View>
    <TouchableOpacity 
       onPress={() => updateItem(item, index)}               
    >
   </TouchableOpacity>
   </View>
  )
 }

return (
    <View>
        <FlatList
            data={data}
            renderItem={renderItem}
        />
    </View>
    )