问题：

React本机-超出最大调用堆栈大小

阙项禹

2023-03-14

当我添加<代码>时

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

我得到错误

超过了最大调用堆栈大小

当然，如果我注释掉

该菜单是一个脱离画布的反应式菜单

我的菜单组件：

组件/菜单/菜单.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

是什么导致了错误？

下面是我使用菜单的组件(可能不相关):

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

共有1个答案

夔光霁

2023-03-14

这是因为您正在渲染另一个

类似资料：

react超出最大调用堆栈大小

如果用户未登录，我尝试将用户重定向到“TrapPage”。这是我的代码：当我将函数requireAuth放在onEnter上时，控制台给我一个错误: 我是一个反应迟钝的人，请耐心点:) 我的代码有什么问题？
React -超出了最大调用堆栈大小

我正在使用我岳父让我建立的一个网站作为学习React的借口。我不是一个天生的JavaScript开发人员（更喜欢后端），我知道我下面的代码中可能有一些递归元素，但我就是看不到。谁能告诉我我做错了什么？
RangeError:超出最大调用堆栈大小（React）

这是我在React中的第一个应用程序。在localhost中，一切正常，当我使用Github Pages部署时，我的应用程序（Info/Images/evenements）中的一些页面无法呈现。每次单击他们的链接访问他们时，我都会在控制台上看到一个白色页面和此错误： range error:object . tostring处超出了最大调用堆栈大小同样，当我刷新页面时，github pages返
react redux RangeError:超出最大调用堆栈大小

当我为图表（react-chartjs-2）获取数据时，我收到了这个错误。我实现了try/catch块，但不知道如何删除这个错误。在Edge浏览器上，我得到了CRIPT28：SCRIPT28：堆栈空间不足这是我在组件中调用的操作。这是连接到redux存储的组件。它在我看来一切都很好。
范围错误：最大调用堆栈大小已超出 React 本机

我使用https://formidable.com/open-source/urql/用于从React Native中的GraphQL服务器获取数据。该组件的实现方式如下：运行应用程序时，查询按预期工作，我从GraphQL服务器接收数据。但是，控制台会显示错误消息：未处理的promise拒绝，[RangeError：超出最大调用堆栈大小。]在node_modules/core-js/内部/
调试“超出最大调用堆栈大小”

问题内容：我有一台服务器，可能导致以下输出死亡：但是，如果没有堆栈转储或跟踪，就无法确定这是无限递归还是只是链太大而已，更不用说问题函数在哪里了。使用该选项运行Node 不仅使我的测试运行缓慢（正如人们期望的那样），而且没有重现该问题。有人有任何解决方案或提示来深入了解此问题吗？问题答案：看来目前的答案是：站稳脚步，等待Node.js更新到新的V8版本，或者使用此Chromium项目错

React本机-超出最大调用堆栈大小

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档