Question

我正在尝试显示待办事项列表，但在使用.map后遇到了超出最大调用堆栈大小的问题。有人能告诉我这是什么问题吗？

import React, { Component } from 'react';
import './todo.css';

export default class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = { todos: ['to do one thing', 'to do another thing'] };
  }

  showTodos() {
    return this.state.todos.map((todo) => (
      <Todo key={todo} todo={todo} />
    ));
  }

  render() {

    return (
      <div className={'container'}>
        {this.showTodos()}
      </div>
    )
  }
}

Answer 1

这是因为你在showTodos（）方法中渲染Todo元素，所以你试图渲染Todo列表Todo列表的Todo列表，...

相反，渲染一个新的div元素：

  showTodos() {
    return this.state.todos.map((todo) => (
      <div key={todo}>{todo}</div>
    ));
  }

RangeError：使用.map后超出最大调用堆栈大小

1 个答案: