Flatlist React Native 中的 Accordion

Question

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

这是我的代码：

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

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

Answer 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>
        )
    })
 );
};

请检查并告诉我，干杯！