Блог

У меня есть массив, содержащий словари, которые представлены в 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>
    )
 

Это не тот код, с которым я работаю, но мне нужно научиться изменять значения ItemData.item в функции вне элемента отображения плоского списка. Как я могу это сделать?

Для этого вы должны использовать состояние (или другой поток управления состоянием; например, 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>
    ) 

Сохраняя данные в состоянии, мы можем вносить в них изменения динамически.

Мы просто можем передать индекс элемента в реквизитах и обновить состояние данных по конкретному индексу.

например

 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;