reactjs - 我正在尝试从滚动视图中打开模式

Question

我正在尝试从滚动视图的第三个元素打开一个模式。我尝试在不使用状态的情况下打开模式，但在关闭它时遇到问题。我添加了状态，但出现渲染错误。这是我的一段代码

const dummy = [
    { gender: 'Female', id: '1' },
    { gender: 'Male', id: '2' },
    { gender: 'More', id: '3' },
  ];

  const [year, setYear] = useState();
  const [modalOpen, setModalOpen] = useState(false);
  const [selectedId, setSelectedId] = useState(null);

  const pressHandler = item => {
    setSelectedId(item.id);
    selectedId == 3 ? setModalOpen(true) : setModalOpen(false);
  };

<View style={{ flex: 1, flexDirection: 'row', flexWrap: 'wrap' }}>
        <ScrollView horizontal>
          {dummy.map((item, index) => {
            const bgColor =
              item.id === selectedId ? COLORS.primary : COLORS.card;

            return (
              <View key={item.id}>
                <TouchableOpacity
                  activeOpacity={0.8}
                  onPress={pressHandler(item)}
                  style={{
                    backgroundColor: bgColor,
                    borderRadius: 8,
                    alignItems: 'center',
                    marginLeft: 12,
                    marginTop: 12,
                  }}>
                  <Text
                    style={{
                      paddingVertical: 12,
                      paddingHorizontal: 20,
                      color: COLORS.white,
                      fontFamily: 'Gilroy-Medium',
                      fontSize: 16,
                      lineHeight: 24,
                    }}>
                    {item.gender}
                  </Text>
                </TouchableOpacity>
                {selectedId == 3 && (
                  <Modal
                    visible={modalOpen}
                    transparent={true}
                    animationType="slide">
                    <View style={styles.modalBox}>
                      <Text style={styles.modalHeader}>Gender Identity</Text>
                      <TouchableOpacity style={styles.modalSelect}>
                        <Text style={styles.gendSelect}>Non-Binary</Text>
                      </TouchableOpacity>
                      <TouchableOpacity style={styles.modalSelect}>
                        <Text style={styles.gendSelect}>Prefer Not to Say</Text>
                      </TouchableOpacity>
                      <TouchableOpacity
                        style={styles.modalClose}
                        onPress={() => setModalOpen(false)}>
                        <Text style={styles.gendSelect}>Cancel</Text>
                      </TouchableOpacity>
                    </View>
                  </Modal>
                )}
              </View>
            );
          })}
        </ScrollView>
      </View>

但我从 React 得到一个渲染错误说

太多的重新渲染。React 限制渲染次数以防止无限循环

标签： reactjsreact-nativescrollview

Answer 1

因为你pressHandler在渲染时调用。只需将 onPress 更新为：

onPress={() => pressHandler(item)}