>source

나는 React Native를 처음 접했고 FlatList 에서이 문제가 발생하여 사용하는 데이터 소스를 업데이트하고 자체적으로 업데이트하고 싶습니다. 내 케이스에는 FlatList로 표시하고 싶은 항목 목록이 있으며 각 항목을 선택할 수 있습니다. 내가 본 대부분의 예는 구성 요소를 사용하고 있으며 제안은 state ...에 extraData 이 문제를 해결하기 위해. 그러나 나는 순수한 구성 요소를 사용하고 있으며이 경우 해결책이 있는지 확인하려고합니다. 내가 만든 샘플 프로젝트에 따라. 이 예에서는 언론이 발생합니다. data 업데이트되었지만 FlatList는 data 변화.

import { findIndex } from 'lodash'
import React, { useState } from 'react'
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  StatusBar,
  FlatList,
  Pressable,
} from 'react-native'
import {
  Colors,
} from 'react-native/Libraries/NewAppScreen'
var array = require('lodash/array')
const App = () => {
  const [data, setData] = useState([
    {
      name: "Foo",
      id: '1',
      isSelected: false
    },
    {
      name: "Boo",
      id: '2',
      isSelected: false
    },
    {
      name: "Koo",
      id: '3',
      isSelected: false
    },
    {
      name: "Poo",
      id: '4',
      isSelected: false
    },
    {
      name: "Too",
      id: '5',
      isSelected: false
    },
    {
      name: "Qoo",
      id: '6',
      isSelected: false
    },
  ])
  const tappedItem = (item) => {
    const itemIndex = data.findIndex((i) => i.id == item.id)
    const newItem = data[itemIndex]
    newItem.isSelected = !newItem.isSelected
    data[itemIndex] = newItem
    setData(data)
  }
  const renderItem = (item) => {
    return (
      <Pressable onPress={() => tappedItem(item.item)}>
        <View style={[styles.sectionContainer, { backgroundColor: item.item.isSelected ? 'pink' : 'lightgray' }]}>
          <Text style={styles.sectionTitle}>{item.item.name}</Text>
        </View>
      </Pressable>
    )
  }
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <View style={styles.body}>
          <FlatList
            data={data}
            keyExtractor={item => item.id}
            renderItem={renderItem}
            extraData={data}
          />
        </View>
      </SafeAreaView>
    </>
  )
}
const styles = StyleSheet.create({
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
})
export default App

  • 답변 # 1

    최종 출력 :

    FlatList 항목의 선택 및 선택 취소를 구현하는 방법은 다음과 같습니다.

    import React, { useState } from 'react';
    import {
      SafeAreaView,
      StyleSheet,
      View,
      Text,
      StatusBar,
      FlatList,
      Pressable,
    } from 'react-native';
    
    const App = () => {
      const [data, setData] = useState([
        {
          name: 'Foo',
          id: '1',
          isSelected: false,
        },
        {
          name: 'Boo',
          id: '2',
          isSelected: false,
        },
        {
          name: 'Koo',
          id: '3',
          isSelected: false,
        },
        {
          name: 'Poo',
          id: '4',
          isSelected: false,
        },
        {
          name: 'Too',
          id: '5',
          isSelected: false,
        },
        {
          name: 'Qoo',
          id: '6',
          isSelected: false,
        },
      ]);
      const tappedItem = (item) => {
        console.log(item);
        const modifiedList= data.map((element) => {
          if (element.id === item.id) {
            return { ...element, isSelected: !element.isSelected };
          }
          return element;
        });
        setData(modifiedList);
      };
      const renderItem = (item) => {
        return (
          <Pressable onPress={() => tappedItem(item.item)}>
            <View
              style={[
                styles.sectionContainer,
                { backgroundColor: item.item.isSelected ? 'pink' : 'lightgray' },
              ]}>
              <Text style={styles.sectionTitle}>{item.item.name}</Text>
            </View>
          </Pressable>
        );
      };
      return (
        <>
          <StatusBar barStyle="dark-content" />
          <SafeAreaView>
            <View style={styles.body}>
              <FlatList
                data={data}
                keyExtractor={(item) => item.id}
                renderItem={renderItem}
                extraData={data}
              />
            </View>
          </SafeAreaView>
        </>
      );
    };
    const styles = StyleSheet.create({
      body: {
        backgroundColor: 'white',
      },
      sectionContainer: {
        marginTop: 32,
        paddingHorizontal: 24,
      },
      sectionTitle: {
        fontSize: 24,
        fontWeight: '600',
        color: 'black',
      },
    });
    export default App;
    
    
    

    전체 작업 데모 : Expo Snack

관련 자료

  • 이전 javascript - react-router를 사용하여 새 탭에 단일 구성 요소를 표시하는 방법이 있습니까?
  • 다음 system verilog - systemverilog의 'b0과 반대로'0의 유형은 무엇입니까?