Question

当我将<Menu />组件添加到我的标题中时，如下所示：

let SearchPage = (props) => {
  const menu = (
    <Container>
      <Header style={styles.header}>
        <Left>
          <Button >
            <Menu />
          </Button>
        </Left>
        <Body>

我收到错误

超出最大调用堆栈大小

当然，如果我在<Menu />中注释掉SearchPage行，则没有错误。

菜单为react-native-off-canvas-menu

我的菜单组件：

组件/菜单/ Menu.js

import React from 'react'
import { View, Icon } from 'react-native'
import { connect } from 'react-redux'
import { togglePageMenu } from './menu.action'
import { OffCanvas3D } from 'react-native-off-canvas-menu'
//import AddPage from '../add-page/AddPage'
import SearchPage from '../search-page/SearchPage'

const mapStateToProps = (state) => ({
  isOpen: state.get('menu').isOpen
})

const mapDispatchToProps = (dispatch) => ({
  togglePageMenu: () => {
    dispatch(togglePageMenu())
  }
})

let Menu = (props) => (
  <View style={{ flex: 1 }}>
    <OffCanvas3D
      active={props.isOpen}
      onMenuPress={props.togglePageMenu}
      backgroundColor={'#222222'}
      menuTextStyles={{ color: 'white' }}
      handleBackPress={true}
      menuItems={[
        {
          title: 'Search Products',
          icon: <Icon name="camera" size={35} color='#ffffff' />,
          renderScene: <SearchPage />
        }
      ]} />
  </View>
)
Menu.propTypes = {
  togglePageMenu: React.PropTypes.func.isRequired,
  isOpen: React.PropTypes.bool.isRequired
}

Menu = connect(
  mapStateToProps,
  mapDispatchToProps
)(Menu)

export default Menu

可能导致错误的原因是什么？

这是我使用菜单的组件（可能不相关）：

组件/搜索页/ SearchPage.js

import { ScrollView, StyleSheet, View } from 'react-native'
import {
  Container,
  Button,
  Text,
  Header,
  Body,
  Right,
  Left,
  Title,
  Icon
} from 'native-base'
import React from 'react'
import Keywords from '../keywords/Keywords'
import Categories from '../categories/Categories'
import Location from '../location/Location'
import Menu from '../menu/Menu'
import DistanceSlider from '../distanceSlider/DistanceSlider'
import Map from '../map/Map'
import Drawer from 'react-native-drawer'
import { connect } from 'react-redux'
import { toggleMenu } from './searchPage.action'
import { styles, wideButtonColor } from '../../style'
import searchPageStyle from './style'
import { selectIsSearchFormValid } from './isSearchFormValid.selector'

const mapStateToProps = (state) => ({
  isMenuOpen: state.get('searchPage').get('isMenuOpen'),
  isSearchFormValid: selectIsSearchFormValid(state)
})

const mapDispatchToProps = (dispatch) => ({
  toggleMenu: () => {
    dispatch(toggleMenu())
  }
})

let SearchPage = (props) => {
  const menu = (
    <Container>
      <Header style={styles.header}>
        <Left>
          <Button >
            <Menu />
          </Button>
        </Left>
        <Body>
          <Title style={styles.title}>Search Products</Title>
        </Body>
        <Right>
        </Right>
      </Header>
      <Container style={styles.container}>
        <ScrollView keyboardShouldPersistTaps={true}>
          <Categories />
          <View style={searchPageStyle.locationContainer}>
            <Location />
          </View>
          <DistanceSlider />
          <Keywords />
          <Button 
            block 
            style={{
              ...searchPageStyle.goButton, 
              backgroundColor: wideButtonColor(!props.isSearchFormValid)
            }} 
            disabled={!props.isSearchFormValid}
            onPress={props.toggleMenu}>
            <Text>GO</Text>
          </Button>
        </ScrollView>
      </Container>
    </Container>
  )
  return (
    <Drawer open={props.isMenuOpen} content={menu}>
      <Container style={mapStyles.container}>
        <Map />
      </Container>
    </Drawer>
  )
}
SearchPage.propTypes = {
  toggleMenu: React.PropTypes.func.isRequired,
  isMenuOpen: React.PropTypes.bool.isRequired,
  isSearchFormValid: React.PropTypes.bool.isRequired
}

SearchPage = connect(
  mapStateToProps,
  mapDispatchToProps
)(SearchPage)

export default SearchPage

const mapStyles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  }
})

Answer 1

这是因为您要在菜单中呈现另一个<SearchPage />：renderScene: <SearchPage />。这会创建一个循环依赖关系，其中SearchPage正在创建一个菜单，菜单正在创建一个SearchPage ...等等，直到你看到，你的内存耗尽。

React native - 最大调用堆栈大小超过

1 个答案: