Блог

Я держу массив json внутри своего основного компонента, и я создал «FormComponent», который содержит входные данные.

Я создал функцию «добавить» внутри родительского компонента и пытаюсь отправить ее дочернему элементу через prop под именем 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."}/>
                amp;nbsp;
                <button onClick={this.createTODO}>Add!</button>
                amp;nbsp;
                <button>Clear list</button>
            </div>
        )
    }
}

export default FormComponent;
 

Но я получаю Maximum update depth exceeded. сообщение об ошибке,

Спасибо за вашу помощь.

Должно быть удалено () из реквизита.

Это <FormComponent createTODOhandler={this.createTODO()} />

Изменено на: <FormComponent createTODOhandler={this.createTODO} />

Это ваша ошибка:

 <FormComponent createTODOhandler={this.createTODO()} />
 

Вы выполняете функцию каждый раз, когда визуализируете компонент. Вместо этого вам нужно иметь только ссылку на функцию:

 <FormComponent createTODOhandler={this.createTODO} />