React Native - 如何从父级获取 FlatList 项的值答案

【问题标题】：React Native - How to get the values of FlatList Items from ParentReact Native - 如何从父级获取 FlatList 项的值
【发布时间】：2021-04-16 14:33:16
【问题描述】：

我正在使用已呈现项目的平面列表。平面列表中的每个项目都是一个自定义组件，具有一个包含整数值的状态。在平面列表下方，我有一个按钮，单击它必须打印项目中状态变量的值。我正在尝试使用“useRef”数组。我无法访问平面列表的项目。我缺少一些东西来处理它。

这是我的参考代码：

//Custom Component
export const SelectionOptions = (props: any) => {
    const {
        title = '',
        options = [],
        selected = [],
        allowSingleSelection = true,
    } = props;

    const [selectedItems, setSelectedItems] = useState(selected);

  
    return (
    <View>
    .
    .
    .
    .
    </View>
            )
}


//Parent
const OnBoardingScreen = () => {

    const flatList = createRef<FlatList<any>>();
    const [currentDisplayingPage, setCurrentDisplayingPage] = useState(0);
    const [selectedTab, setSelectedTab] = useState(0);
    const itemEls = useRef(new Array())

    const [data, setData] = useState([
        {
            id: 1,
            value: {
                title: 'Age Group',
                options: [
                    { id: 1, value: { left: 'A', right: '18-30' } },
                    { id: 2, value: { left: 'B', right: '31-45' } },
                    { id: 3, value: { left: 'C', right: '45-64' } },
                    { id: 4, value: { left: 'D', right: '65+' } },
                ],
                singleSelection: true
            }
        },
    ]);

    const renderItem = (item) => {
        return (
            <SelectionOptions
                title={item.value.title}
                options={item.value.options}
                allowSingleSelection={item.value.singleSelection}
                ref={(element) => { itemsEls[item.id] = element; }}
            />
        );
    };

    return (
        <Container style={styles.container}>
                
            <FlatList
                scrollEnabled={false}
                style={{ width: 300 }}
                horizontal
                pagingEnabled
                showsHorizontalScrollIndicator={false}
                data={data}
                renderItem={(item) => renderItem(item.item)}
                ref={flatList}
            />
            <Button onPress={() = {
                for item in each itemsEls {
                    console.log(item.current.selectedItems);
                }
            }} title=“Click Me”/>
            />
        </Container >
    );
}


export default OnBoardingScreen;

【问题讨论】：

和itemsEls[item.id]你的意思是itemsEls[item.item.id]吗？我建议你在 renderItem 中解构 item：const renderItem = ({ item }) => {...} 避免每次都出现多余的 item.item
@Milore 感谢关于解构的建议。我更新了我的代码。你现在可以检查并告诉我处理 flatlist 中的 refs 的方法吗？

标签： react-native react-hooks react-native-flatlist use-ref

【解决方案1】：

import React from 'react';
import {
  FlatList,
  Text,
  View,
} from 'react-native';

const Home = () => {
    Data = [
        {
            id : 1,
            email : 'abc@gmail.com',
            first_name : 'abc',
        },
        {
          id : 2,
          email : 'xyz@gmail.com',
          first_name : 'xyz',
      },
         {
          id : 3,
          email : 'pqr@gmail.com',
          first_name : 'pqr',
      } ,
        {
          id : 4,
          email : 'mno@gmail.com',
          first_name : 'mno',
      },
         {
          id : 5,
          email : 'rst@gmail.com',
          first_name : 'rst',
      }
    ]
  const renderDataList = ({item}) => {
    return (
      <>
        <View style={{marginLeft: '10%'}}>
          <Text style={{color: 'red'}}> {item.email}</Text>
          <Text> {item.first_name}</Text>
        </View>
        <View
          style={{
            borderColor: 'black',
            borderBottomWidth: 2,
          }}></View>
      </>
    );
  };

  return (
    <>
      <SafeAreaView> 
        <FlatList 
            data={Data} 
            renderItem={renderDataList} 
            keyExtractor={item=>{item.id}} 
        />
      </SafeAreaView>
    </>
  );
};

export default Home;

【讨论】：