时间戳

首页 > 解决方案 > 使用 React 钩子将 setState 传递给子组件

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

问题描述

我很好奇setState作为道具传递给孩子（愚蠢的组件）是否违反了任何“最佳实践”或会影响优化。

这是一个示例，其中我将父容器传递给两个子组件，子组件将在其中调用该state函数。setStatesetState

我没有明确地调用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
                })
            ),
        })
    }
}

到目前为止，我还没有注意到任何状态问题。

标签： javascriptreactjsreact-hooksreact-componentreact-state-management

解决方案

可以从子级调用函数来设置父级的状态，但是在执行此操作时要记住几件事

1）我希望您实际上并没有将函数称为“setState”，因为从纯语法的角度来看，您通常不希望这样做

2）意识到从孩子内部调用函数时，您正在影响父母而不是孩子的状态。如果您忘记了要操作的数据以及从何处操作，这可能会导致一些奇怪的结果。

推荐阅读