使用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
                })
            ),
        })
    }
}

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

- Nicholas Porter

---

我认为从子组件的角度来看，将setState称为prop并不是错误的。如果子组件从prop中设置自己的状态，然后更新它（这是目前React的常规流程），那么该子组件就不再是愚蠢的了。这可能会使编码更快，但会降低可读性。 - ilkerkaran

Answer 1

一个好的实践方法是创建一个处理函数，将其委托给setState函数，并将此函数传递给子组件。

- Purvil Bambharolia

---

为什么这是一个好的做法？它能改善什么？ - Nicholas Porter

这是一个好主意的两个原因：1）传递 setState 函数会在组件之间强耦合子组件和父组件。它们不再是独立的单元，所以此时你应该问自己-它们是否应该完全分开成两个组件？ 2）[更实际的原因]- 当事件发生时，这将削弱父组件可以执行的操作灵活性。例如，父组件需要“在事件发生时设置状态并显示警报”。如果接口是 onX，则可以执行此操作。如果是 setState，则不能。 - Nate

Answer 2

从子组件调用函数来设置父组件的状态是可以的，但是在这样做时有几点需要注意：

1）我希望你不要实际将函数称为“setState”，因为从纯语法上讲，你通常不想这样做。

2）请注意，当从子组件调用函数时，你会影响父组件的状态而不是子组件的状态。如果你失去了对所要操作的数据以及其来源的跟踪，这可能会导致一些奇怪的结果。

- BRose

---

谢谢！是的，我应该补充说明一下，我没有直接调用setState。我创建了一个服务来区分要设置哪个状态属性。 - Nicholas Porter