소품을 통해 자식에게 기능을 들어 올리려고 시도하는 동안 최대 업데이트 깊이를 초과했습니다.

주 구성 요소 내부에 json 배열을 보관하고 있으며 입력을 보관하는 "FormComponent"를 만들었습니다.

부모 구성 요소 내부에 '추가'기능을 만들었으며 createTODOhander여기에서 볼 수 있듯이 이름 아래에 소품을 통해 자식에게 보내려고합니다 .

import * as React from "react";
import Task from "./Task";
import FormComponent from "./FormComponent";


class TodoList extends React.Component {
    state = {
        MAXIMUMJOBS: 5,
        TodoList: [],
    }
    createTODO = (Todoname) => {
        this.setState({
            TodoList: this.state.TodoList.concat({Todoname: Todoname})
        })
    }
    render() {
        return (
            <div style={{marginLeft: '10px'}}>
                <h3>You can enter {this.state.MAXIMUMJOBS - this.state.TodoList.length} TODO list jobs.</h3>
                <FormComponent createTODOhandler={this.createTODO()} />
            )
    }
}

온 FormComponent나는이 방법을 사용하려고 해요 :

import * as React from "react";


class FormComponent extends React.Component {
    state = {
        inputValue: ''
    }
    inputChanged = (e) => {
        this.setState({
            inputValue: e.target.value
        })
    };
    createTODO = () => {
        if (this.state.inputValue === '') {}//do nothing, not gonna happen because the button is disabled.
        else{
            this.props.createTODOhandler(this.state.inputValue);
        }
    };
    render() {
        return (
            <div>
                <input type="text" onChange={this.inputChanged} value={this.state.inputValue}
                       placeholder={"Enter your job here."}/>
                &nbsp;
                <button onClick={this.createTODO}>Add!</button>
                &nbsp;
                <button>Clear list</button>
            </div>
        )
    }
}

export default FormComponent;

하지만 Maximum update depth exceeded.오류가 발생합니다.

당신의 도움을 주셔서 감사합니다.