使用 React hooks 將 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

一個好的做法是創建一個處理函數，該函數委托給setState函數並將該函數傳遞給子組件。

Answer 2

可以從子項調用一個函數來設置父項的狀態，但是在執行此操作時需要記住幾件事

1）我希望你實際上不是將函數稱為“setState”，因為通常你不希望這樣做，從純粹的語法角度來看

2) 意識到在從子對象中調用函數時，您影響的是父對象的狀態，而不是子對象的狀態。 如果您忘記了要操作的數據以及從何處操作，這可能會導致一些奇怪的結果。