Question

我正在尝试根据一些json数据构建一个包含多个页面的屏幕。

我这样做是通过遍历数组并为每次迭代推送一个组件，然后将数组返回到render函数。

问题是，我收到错误消息：RangeError：超出了最大调用堆栈的大小，好像正在发生无限循环，但我看不到它在哪里发生。

代码：

export default class HomeScreen extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    headerLeft: (
      <LogoContainer
        onPress={navigateToConfig.bind(this, navigation)}
        underlayColor="#fff"
      >
        <AsyncImage source="https://www.therange.co.uk/img/header-logo-retina.png" />
      </LogoContainer>
    ),
    headerRight: (
      <TouchableOpacity
        onPress={navigateToSearch.bind(this, navigation)}
        style={{ marginRight: 10 }}
      >
        <Icon name="search" size={RESP_FONT.icon_small} color={Colors.gray} />
      </TouchableOpacity>
    )
  });

  constructor(props) {
    super(props);
    this.state = {
      data: null,
      data_ready: false
    };
    config_counter = 0;
  }

  componentDidMount() {
    this.generateHomeScreen();
  }

  async generateHomeScreen() {
    //Request json data
    try {
      const rslt = await asyncAjax("GET", global.SERVER_URL + "/mcapi/cnt", {
        sid: SCREEN_ID
      });

      this.setState({
        data: rslt,
        data_ready: true
      });
    } catch (e) {
      console.error(e);
      this.props.navigation.navigate("Error", {
        message: e
      });
    }
  }

  renderHomePages(homescreen_arr) {
    let page_arr = [];

    for (let ind = 0; ind < homescreen_arr.length; ind++) {
      let page = homescreen_arr[ind];
      switch (
        page.page_type //Add in a switch as more templates to add later
      ) {
        case "tile":
          page_arr.push(
            <View>
              <TilePage
                data={page}
                navigation={this.props.navigation}
                show_data={false}
              />
            </View>
          );
      }
    }
    return page_arr;
  }

  render() {
    //Return loading spinner until json data is returned
    if (!this.state.data_ready) return <LoadingSpinner />;

    const homescreen_arr = this.state.data.component_arr;

    //Build home pages once json data is available
    return <Pages>{this.renderHomePages(homescreen_arr)}</Pages>;
  }
}

我注意到的一件事是，如果我在renderHomePages()开头的控制台日志中，控制台日志在错误发生之前被调用了两次。因此，似乎该函数被调用了不止一次，我不知道为什么

编辑：

我已经研究了问题是否出在TilePage上，但是，即使TilePage是基本组件，问题仍然很明显：

export default class TilePage extends React.Component {
    render() {
        return (
            <View>
                <Text>Test</Text>
            </View>
        );
    }
}

Answer 1

I've found the answer, though I'm not quite sure why.

It seems attempting to render the TilePage component within a View is what was causing the issue, so removing the View container for each has resolved the problem.

case "tile":
      page_arr.push(
          <TilePage
            data={page}
            navigation={this.props.navigation}
            show_data={false}
          />
      );

最大调用堆栈大小超出了返回的组件数组

1 个答案: