Javascript RangeError:使用.map后超出了最大调用堆栈大小

我正在尝试显示TODO列表，但在使用.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>
    )
  }
}

import React，{Component}来自'React'；
导入“/todo.css”；
导出默认类Todo扩展组件{
建造师（道具）{
超级（道具）；
this.state={todos:['做一件事'，'做另一件事']}；
}
showTodos（）{
返回此.state.todos.map（（todo）=>(
));
}
render（）{
返回(
{this.showTodos（）}
)
}
}

这是因为您正在showTodos（）方法中呈现Todo元素本身，所以您尝试呈现Todo列表Todo列表Todo列表Todo列表

相反，渲染一个新的div元素，如下所示：

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

showTodos（）{
返回此.state.todos.map（（todo）=>(
{todo}
));
}

这是因为您正在showTodos（）方法中呈现Todo元素本身，所以您尝试呈现Todo列表Todo列表Todo列表Todo列表

相反，渲染一个新的div元素，如下所示：

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

showTodos（）{
返回此.state.todos.map（（todo）=>(
{todo}
));
}

您的

Todo

组件是什么样子的？您还需要将

this.showTodos

与

this

绑定，将

this.showTodos（）与
this.showTodos.bind（this）
组件的外观如何？您还需要将
this.showTodos
与
this
绑定，将
this.showTodos（）
与
this.showTodos.bind（this）
绑定，但当我这样做时，我只有一个div包含所有todo，需要的div与todo一样多，但当我这样做时，我只有一个div包含所有todo，需要的div与todo一样多