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

Question

我有一个数组，其中包含以平面列表表示的字典。每当我触摸一个组件时，我都想执行一个更改某些词典数据的功能。例如：

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>
    )

这不是我正在使用的代码，但我需要学习做的事情是更改 flatlist 的 renderItem 之外的函数的 itemData.item 值。我该怎么做？

Answer 1

通过将数据存储在状态中，我们可以对其进行动态更改。

我们可以简单地在道具中传递项目的索引并更新特定索引上的数据状态。

例如

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;

Answer 2

你应该使用状态来做到这一点（或其他状态管理流程；比如 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>
    )

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

How can I change the data of a flatlist with a function?

function

react-native

react-native-flatlist