Неожиданный результат вызова функции. Что я делаю не так?

Question

[gooseNjuice ()]

Проблема: при вызове функции addEducationDiv вызывается removeEducationDiv, причем бесконечное количество раз

class SeekerRegistration extends Component {
    constructor(props) {
        super(props)
        this.state = {
            educations: [({section: Education})],
            ...
        }
        this.addEducationDiv = this.addEducationDiv.bind(this);
        this.removeEducationDiv = this.removeEducationDiv.bind(this);
    }

addEducationDiv() {
    const educations = [...this.state.educations, {section: Education}]
    this.setState({educations});
}

removeEducationDiv({id}) {
    console.log('removing...')
    const educations = this.state.educations.filter(div => div.id !== id)
    this.setState({educations})
}

render() {
    const {addEducationDiv, removeEducationDiv} = this
    const {educations} = this.state
    return <div>
        {educations.map((n, i) =>
            <div><Education id={n.id}/>
                {(i === educations.length - 1) ?
                    <AddButton addSection={addEducationDiv}/> :
                    <RemoveButton removeSection={removeEducationDiv(i)}/>}
            </div>)}
    </div>
}}

Коды кнопок простые:

const AddButton = ({addSection = f => f}) =>
    <button onClick={addSection}>+</button>
const RemoveButton = ({removeSection = f => f, id}) =>
    <button onClick={removeSection(id)}>-</button>

Почему когда нажимаю на кнопку AddButton,многократно происходит событие, которое даже к ней не привязано? При этом примерно после тысячи вызовов removeEducationDiv всё-таки происходит addEducationDiv, то есть событие добавляется. Потом, естественно, выскакивает сообщение "Maximum update depth exceeded"

Answer 1

[Алексей Уколов]

Сейчас вы в рендере сразу вызываете removeEducationDiv не дожидаясь никаких нажатий (ещё и передаёте туда неправильный аргумент). Должно быть так:

<RemoveButton removeSection={() => removeEducationDiv(n)}/>}

Ну и в компоненте RemoveButton та же ошибка (там вообще никакие аргументы не нужны).

Comments

[gooseNjuice ()]

Вы не могли объяснить, как "для чайников"? У меня вызывают непонимание три момента

• В чем разница, передаю я в качестве свойства компоненту функцию, или функцию,возвращающую функцию, как в вашем примере?
  
• Почему передается n, а не n.id? Ведь нужен только id, чтобы отфильтровать массив
  
  
• Я заменил передачу функции на "()=>функция" в обоих кнопках, и теперь при нажатии AddButton не происходит вызова ни одной из функций. Почему такое может быть?
  

[Виктор]

Вы не функцию передаете, а результат ее вызова, у Вас должно быть просто

<RemoveButton removeSection={removeEducationDiv}/>}

Вы же даже специально ее биндите на this в конструкторе, чтобы можно было передатьне оборачивая в замыкание.

[Алексей Уколов]

В чем разница, передаю я в качестве свойства компоненту функцию, или функцию,возвращающую функцию, как в вашем примере?

Никакой разницы нет. Но вы передавали не функцию, а результат её выполнения (undefined), а сама функция вызывалась сразу при рендере (и вызывала рендер снова и так по кругу).

Почему передается n, а не n.id? Ведь нужен только id, чтобы отфильтровать массив

Потому что removeEducationDiv принимает объект в первом аргументе и автоматически достаёт из него поле id.

Я заменил передачу функции на "()=>функция" в обоих кнопках, и теперь при нажатии AddButton не происходит вызова ни одной из функций. Почему такое может быть?

Попробуйте не бездумно всё править, а разобраться зачем вы это делаете. С AddButton у вас всё было нормально.

Вам нужно изучать основы: learn.javascript.ru