使用React钩子将setState传递给子组件

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。将其传递给孩子不是一个好习惯。只需在组件上进行更新即可。

Answer 3

[一个好的实践将包括您创建一个处理程序函数，该函数委派给setState函数，并将此函数传递给子组件。