纯组件中的反应本机更新FlatList数据

原学程将引见杂组件中的反响原机革新FlatList数据的处置办法，这篇学程是从其余处所瞅到的，而后减了1些海外法式员的疑问与解问，愿望能对于您有所赞助，佳了，上面开端进修吧。

成绩描写

我对于Reaction Native有些生疏，而且一向在应用FlatList时碰到这个成绩，我想革新它应用的数据源，并让它革新它本身。我的案例是有1个我想用FlatList显示的项目列表，而后每一个项目皆是可选择的。我瞅到的年夜多半示例皆是应用组件，修议曾经将state添减到extraData去处理这个成绩。但是，我应用的是杂组件，并测验考试检查在这类情形下能否有所有处理计划。遵守我创立的1个样例项目。在此示例中，产生了按下操纵，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: '一',
isSelected: false
 },
 {
name: "Boo",
id: '二',
isSelected: false
 },
 {
name: "Koo",
id: '三',
isSelected: false
 },
 {
name: "Poo",
id: '四',
isSelected: false
 },
 {
name: "Too",
id: '五',
isSelected: false
 },
 {
name: "Qoo",
id: '六',
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: 三二,
 paddingHorizontal: 二四,
  },
  sectionTitle: {
 fontSize: 二四,
 fontWeight: '六00',
 color: Colors.black,
  },
})

export default App

推举谜底

终究输入：

怎样完成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: '一',
isSelected: false,
 },
 {
name: 'Boo',
id: '二',
isSelected: false,
 },
 {
name: 'Koo',
id: '三',
isSelected: false,
 },
 {
name: 'Poo',
id: '四',
isSelected: false,
 },
 {
name: 'Too',
id: '五',
isSelected: false,
 },
 {
name: 'Qoo',
id: '六',
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: 三二,
 paddingHorizontal: 二四,
  },
  sectionTitle: {
 fontSize: 二四,
 fontWeight: '六00',
 color: 'black',
  },
});

export default App;

任务tappedItem()：

/* 
Lets assume we pressed first item in the FlatList, the item that we will be passing 
is: {
name: 'Foo',
id: '一',
isSelected: false,
 }

After that is done most important and also probably the easiest part, 
the modification of the existing state, i.e. toggling the selected property. 

*/
const tappedItem = (item) => {
 console.log(item);
/*
In the following map operation, we iterate through the existing state, i.e. data.
and when we find the matching id, 一 in the case of 
=> {
name: 'Foo',
id: '一',
isSelected: false,
 }

we return the mutated object where we change only the `isSelected` property

You can see this happening here: 
=> if (element.id === item.id) {
  return { ...element, isSelected: !element.isSelected };
}
in above if statement, we spread the `element` object, toggle the `isSelected` property and return it. 

If the id does not matches then we can simply return the original `element` object without any changes. 

So after that, we will get the modifiedList which will have the `isSelected` toggled as we intend to. 

Then we simply set the data state with that of the newly modified list. 

=> setData(modifiedList);

*/
 const modifiedList= data.map((element) => {
if (element.id === item.id) {
  return { ...element, isSelected: !element.isSelected };
}
return element;
 });
 setData(modifiedList);
  };

/*
this variation of your existing tappedItem function will work fine too, 

just be careful not to mutate the states directly as you did in the original case

=>  data[itemIndex] = newItem [❌]
=> let temp = [...data] 
temp[itemIndex] = newItem; [✔]
*/


 const tappedItem = (item) => {
 let temp = [...data] //<= create a copy of current state
 const itemIndex = data.findIndex((i) => i.id == item.id);
 const newItem = data[itemIndex];
 newItem.isSelected = !newItem.isSelected;
 temp[itemIndex] = newItem; //<= modify that copy
 setData(temp); //<= use it to set the state.
  };

完全任务演示：Expo Snack

佳了闭于杂组件中的反响原机革新FlatList数据的学程便到这里便停止了，愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野，更多技巧学程不妨在站内搜刮。