反应本机 - 超过最大调用堆栈大小答案

【问题标题】：React native - Maximum call stack size exceeded反应本机 - 超过最大调用堆栈大小
【发布时间】：2017-10-12 06:03:58
【问题描述】：

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

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

我得到了错误

超过最大调用堆栈大小

当然，如果我在SearchPage 中注释掉<Menu /> 行，则不会出现错误。

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

我的菜单组件：

components/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

什么可能导致错误？

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

components/search-page/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',
  }
})

【问题讨论】：

我完全猜想这可能是由于在Menu 中使用SearchPage 引起的，反之亦然。编辑：哦，好的-“当然，如果我在我的 SearchPage 中注释掉行，则没有错误。”
@ArkadiuszWieczorek 是的！谢谢！只是要做我的研究并找出将我的菜单组件放在哪里，因为我猜它不应该放在使用它的页面中。

标签： javascript reactjs react-native

【解决方案1】：

这是因为您在菜单中呈现另一个<SearchPage />：renderScene: <SearchPage />。这会创建一个循环依赖项，其中 SearchPage 正在创建一个 Menu，而 Menu 正在创建一个 SearchPage... 等等。如您所见，直到内存不足。

【讨论】：