模态内的嵌套平面列表

问题描述

我不确定我正在尝试做的事情是否可行。我想创建一个过滤器，所以我想我会用嵌套的平面列表来做（第一个 FL 是标题，然后第二个是他们的数据）。我在模态中有这个，所以有很多状态更新。我继续遇到状态问题，如果用户点击标题，它不会让我隐藏或显示嵌套的平面列表数据。

我是否试图强迫它做一些它不擅长的事情？或者这是一个简单的任务，我只是没有正确调用 onPress 函数？

我遇到了一些错误 "cannot update a component from inside the function body of a different component." "this synthetic event is reused for performance reasons. is you're seeing this you're accessing the property "bubbles"..."

const CustomModal = props => {
  const [openedFilter,setOpenedFilter] = useState(false);
  const [categoryPosition,setCategoryPosition] = useState(0);
    
  const renderSubItem = ({ item }) => {
    return (
      <Sview flex={1} fontSize={30} marginTop={50}>
        <Stext onPress={props.onClose}>{item}</Stext>
      </Sview>
    );
  };

  const openFilter = position => {
    setCategoryPosition(position);
    setOpenedFilter(true);
  };

  return (
    <SafeAreaView style={styles.container}>
      <Modal
        animationType="slide"
        visible={props.visible}
        onRequestClose={props.onClose}
      >
        <FlatList
          data={props.data}
          renderItem={({ item }) => (
            <Sview>
              <Pressable onPress={openFilter}>
                <Stext>{item.title}</Stext>
              </Pressable>
              {openedFilter && (
                <FlatList
                  data={item.subData[categoryPosition]}
                  renderItem={renderSubItem}
                  keyExtractor={subItem => subItem.id}
                />
              )}
            </Sview>
          )}
          keyExtractor={item => item.id}
        />

        <Pressable
          style={[styles.button,styles.buttonClose]}
          onPress={props.onClose}
        >
          <Stext style={styles.textStyle}>Hide Modal</Stext>
        </Pressable>
      </Modal>
    </SafeAreaView>
  );
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）