Передача setState дочернему компоненту с помощью перехватчиков React

Мне любопытно, если передача setState в качестве опоры дочернему (тупому компоненту) нарушает какие-либо «лучшие практики» или повлияет на оптимизацию.

Вот пример, в котором родительский контейнер передает state и setState двум дочерним компонентам, где дочерние компоненты будут вызывать функцию setState.

Я не вызываю setState в дочерних элементах явно, они ссылаются на службу для обработки правильной установки свойств состояния.

export default function Dashboard() {

    const [state, setState] = useState({
        events: {},
        filters: [],
        allEvents: [],
        historical: false,
    });


    return (
        <Grid>
            <Row>
                <Col>
                    <EventsFilter
                        state={state}
                        setState={setState}
                    />
                    <EventsTable
                        state={state}
                        setState={setState}
                    />
                </Col>
            </Row>
        </Grid>
    )
}

Пример службы setState в дашборде

function actions(setState) {
    const set = setState;
    return function () {
        return ({

            setEvents: (events) => set((prev) => ({
                ...prev,
                events,
            })),

            setAllEvents: (allEvents) => set((prev) => ({
                ...prev,
                allEvents,
            })),

            setFilters: (name, value) => set((prev) =>
                ({
                    ...prev,
                    filters
                })
            ),
        })
    }
}

Пока никаких государственных проблем не заметил.


person Nicholas Porter    schedule 21.01.2020    source источник
comment
Я думаю, что это не неправильно, если мы называем setState опорой с точки зрения ребенка. И если дочерний элемент установил свое собственное состояние из prop, а затем обновил его (что до сих пор является обычным потоком React), тогда этот дочерний элемент больше не тупой. это может ускорить кодирование, но снизит удобочитаемость.   -  person ilkerkaran    schedule 22.01.2020


Ответы (2)


Можно вызвать функцию из дочернего элемента, чтобы установить состояние родителя, однако при этом следует помнить о нескольких вещах.

1) Я надеюсь, что вы на самом деле не вызываете функцию как "setState", поскольку обычно вы этого не хотите, с чисто синтаксической точки зрения.

2) Осознайте, что вы влияете на состояние родителя, а не ребенка, когда вызываете функцию изнутри ребенка. Это может привести к неприятным результатам, если вы потеряете информацию о том, какими данными вы собираетесь манипулировать и откуда.

person BRose    schedule 21.01.2020
comment
Спасибо! Да, я должен добавить, что я не вызываю setState напрямую. Я создал службу для определения того, какое свойство состояния нужно установить. - person Nicholas Porter; 22.01.2020

Хорошая практика будет заключаться в создании функции-обработчика, которая делегирует функцию setState и передает эту функцию дочернему компоненту.

person Purvil Bambharolia    schedule 21.01.2020
comment
И почему именно это хорошая практика? Что это улучшает? - person Nicholas Porter; 22.01.2020