我正在学习 React，为了进行培训，我想创建一个基本的 Todo 应用。第一步，我想创建一个名为 AddTodo 的组件，该组件呈现一个输入字段和一个按钮，每次我在输入字段中输入内容并按下按钮时，我都想将输入字段的值传递给另一个名为 TodoList 的组件并将其附加到列表中。

问题是，当我启动应用程序时，AddTodo 组件成功呈现，但当我输入内容并按下按钮时，应用程序停止响应 2 秒，之后出现此信息： Uncaught RangeError: Maximum call stack size reached 并且什么也没发生。

我的应用程序源代码：Main.jsx

import React, {Component} from 'react';
import TodoList from 'TodoList';
import AddTodo from 'AddTodo';

class Main extends Component {
    constructor(props) {
        super(props);
        this.setNewTodo = this.setNewTodo.bind(this);
        this.state = {
            newTodo: ''
        };
    }
    setNewTodo(todo) {
        this.setState({
            newTodo: todo
        });
    }
    render() {
        var {newTodo} = this.state;
        return (
            <div>
                <TodoList addToList={newTodo} />
                <AddTodo setTodo={this.setNewTodo}/>
            </div>
        );
    }
}
export default Main;

AddTodo.jsx

import React, {Component} from 'react';

class AddTodo extends Component {
    constructor(props) {
        super(props);
        this.handleNewTodo = this.handleNewTodo.bind(this);
    }
    handleNewTodo() {
        var todo = this.refs.todo.value;
        this.refs.todo.value = '';
        if (todo) {
            this.props.setTodo(todo);
        }
    }
    render() {
        return (
            <div>
                <input type="text" ref="todo" />
                <button onClick={this.handleNewTodo}>Add to Todo List</button>
            </div>
        );
    }
}
AddTodo.propTypes = {
    setTodo: React.PropTypes.func.isRequired
};
export default AddTodo;

TodoList.jsx

import React, {Component} from 'react';

class TodoList extends Component {
    constructor(props) {
        super(props);
        this.renderItems = this.renderItems.bind(this);
        this.state = {
            todos: []
        };
    }
    componentDidUpdate() {
        var newTodo = this.props.addToList;
        var todos = this.state.todos;
        todos = todos.concat(newTodo);
        this.setState({
            todos: todos
        });
    }
    renderItems() {
        var todos = this.state.todos;
        todos.map((item) => {
            <h4>{item}</h4>
        });
    }
    render() {
        return (
            <div>
                {this.renderItems()}
            </div>
        );
    }
}
export default TodoList;