react: передача из функционального компонента несколько состояний вовне

Рейтинг: 0Ответов: 0Опубликовано: 16.04.2023

есть функциональный компонент (отображающий некоторые элементы управления), принимающий на вход два параметра param1, param2 и колбэк onChange, по которому возвращаются обновлённые параметры.

если передачу параметров делать сразу после изменения параметров:

[param1, setParam1] = useState(props.param1)
[param2, setParam2] = useState(props.param2)

const handleChangeParam1 = (newParam) => {
    setParam1(newParam);
    props.onChange({
        param1: param1, 
        param2: param2
    });
}

то в onChange передаётся старый param1, что понятно, поскольку setParam1 не гарантирует изменение param1 сразу.

Каким образом тогда можно добиться того, чтоб по onChange всегда передавались ТОЛЬКО актуальные параметры?

конечно можно использовать newParam, получаемый в колбэке:

const handleChangeParam1 = (newParam) => {
    setParam1(newParam);
    props.onChange({
        param1: newParam, 
        param2: param2
    });
}

но когда передаваемых состояний много, то для каждого изменения состояния писать такой код - не очень универсальное решение :(

Если же использовать useEffect:

const handleChangeParam1 = (newParam) => {
    setParam1(newParam);
}

useEffect(() => {
    props.onChange({
        param1: newParam, 
        param2: param2
    });
}, [props, param1, param2]);

то всё работает, все универсально, но возникает ошибка многократного вызова:

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

подскажите как корректно можно реализовать данный функционал и откуда берется эти многократные вызовы?

понимаю, что похоже из-за цепочки [новое значение] -> [установка состояния] -> [вызов эффекта] -> [передача данных вовне] -> [выставление из данных, переданных вовне пропсов для компонента] -> [установка состояния]...

но я думал, что вызов будет ровно 1, дальше Реакт поймёт, что значения (props) не менялись и не будет перерисовывать постоянно компоненты

Ответы

Ответов пока нет.