react-native - Modal 内的嵌套平面列表

Question

我不确定我想做的事情是否可行。我想创建一个过滤器，所以我想我会用嵌套平面列表来做（第一个 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>
  );
};

标签： react-nativenested-listsreact-native-flatlistreact-native-modal