javascript - React Native-超过最大调用堆栈大小

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

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',
  }
})

最佳答案

这是因为您正在菜单中渲染另一个<SearchPage />:renderScene: <SearchPage />。这将创建循环依赖关系，其中SearchPage正在创建菜单，而Menu正在创建SearchPage ...等。直到您看到内存用完为止。

关于javascript - React Native-超过最大调用堆栈大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43945849/