Flatlist React native 中的 Accordion答案

【问题标题】：Accordion inside a Flatlist React nativeFlatlist React native 中的 Accordion
【发布时间】：2022-01-11 15:45:32
【问题描述】：

我在平面列表中有一个手风琴。

这是我的代码：

const OptionList = (groupOption) => {
   return (
    <FlatList
      data={groupOption.options}
      keyExtractor={(result) => result.id.toString()}
       renderItem={({ item, index }) => {
         const clickedRadio = () => {
         const selectedOption = { [item.question]: { ...item } };
           setAnswers({ ...answers, ...selectedOption });
         };
         const status = isOptionSelected(item) ? true : false;

         return (
          <View key={index}>
            <Radio
              initialValue={status}
              label={item.description}
              onChange={() => clickedRadio()}
              color="error"
             />
          </View>
         );
        }}
      />
    );
  };

  return (
    <View style={styles.container}>
      <Text style={{ fontWeight: "bold", fontSize: 16, color:"#6B24AA" }}>
       {t("Choose an option/Scroll for more questions")}
      </Text>
  
      <FlatList
        data={questions}
        listKey={(item) => item.id.toString()}
        keyExtractor={(result) => result.id.toString()}
        renderItem={({ item, index }) => {
          const data = [
          {
            title: item.description,
            content: (<><OptionList options= 
              {item?.question_options}></OptionList></>)
          }
         ];
       const status = isOptionSelected(item) ? true : false;
       return (
        <View style={styles.groupOptions} key={index}>
          <Accordion style={styles.accordion} 
           headerStyle= 
          {styles.headerStyle} contentStyle={styles.contentStyle} 
          dataArray={data} 
          icon={status ? <Icon name="circle" 
          family="Entypo" size={20} style={{marginLeft: -6, 
          color: "#6B24AA"}}/> 
          : 
           <Icon name="done" 
          family="MaterialIcons" size={20} 
          style={{marginLeft: -6}}/>} 
          expandedIcon={<Icon name="circle" 
          family="Entypo"/>} 
          opened={1}/>
        </View>
      );
    }}
  />
</View>

);

手风琴包含其另一个平面列表组件。每次单击手风琴时都会显示此错误。

显示此错误：

VirtualizedList: Encountered an error while measuring a list's offset from its containing VirtualizedList.
at node_modules/react-native/Libraries/Lists/VirtualizedList.js:1411:10 in _scrollRef.measureLayout$argument_2

我该如何解决这个错误？是手风琴内容的其他平面列表的问题

【问题讨论】：

你为什么使用两个FlatList？使OptionList 成为一个简单的组件，使用map 进行循环。您不必让它变得如此复杂。
是的，实际上，我不知道我是怎么想到的，漫长的一天:)。如果您想将其发布为答案，以便我可以接受。谢谢

标签： javascript react-native react-hooks

【解决方案1】：

请将OptionList 组件替换为以下代码。

选项列表

const OptionList = (groupOption) => {
return (
    groupOption.map((item,index) => {
        const clickedRadio = () => {
        const selectedOption = { [item.question]: { ...item } };
              setAnswers({ ...answers, ...selectedOption });
        };
        const status = isOptionSelected(item) ? true : false;
        return (
        <View key={index}>
         <Radio
           initialValue={status}
           label={item.description}
           onChange={clickedRadio}
           color="error"
          />
       </View>
        )
    })
 );
};

请检查并告诉我，干杯！

【讨论】：