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

Question

Мне любопытно, если передача 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
                })
            ),
        })
    }
}

Пока что я не заметил проблем с состоянием.

Answer 1

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

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

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

Answer 2

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

<Child 
updatestate={(childInfo) => {
  setState(childInfo);
}}
/>

Answer 3

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