0

我们使用 Reacts 功能组件样式开发了一个可重用的类表组件。该表使用 React.useReducer 保存、管理和验证其状态。在每一行中都有几个输入字段、复选框和操作按钮来修改行/表状态。

现在在 GUI 的其他地方有一个保存按钮（不是表的子项）。如何从表中检索状态，以便可以将其（连同其他一些数据）发送到 REST-Endpoint 以保持持久性？

我们实际的解决方案是一个回调函数，它将被设置为桌子上的道具。每次渲染后从 table-component 内部调用此函数以发布当前状态的副本。现在，此回调函数的所有者获取并保存此数据，以便它在保存按钮的范围内可用。

function ComponentWrapper(props)
{
    const dataRef = React.useRef(props.initialData);

    function onDataUpdate(newData) {
        dataRef.current = newDate;
    }
    
    function saveData() {
        // send dataRef.current to REST-Endpoint
    }
    
    return (
        <div>
            <MyTable onDataUpdate={onDataUpdate}></MyTable>
            ...
            <button onClick={(e) => sendData()} name="save">Save</button>
        </div>
    );
}
    
function MyTable(props)
{
    const [state, dispatch] = useReducer(..., props.initialData)

    // ... some code to dispatch state changing actions

    useEffect(() => {
        const copyOfState = { ...state }
        props.onDataUpdate(copyOfState);
    });
   
    return (
        // table markup goes here ...
    );
}

这确实有效，但我们相信对于此类用例可能有更好的方法。我们不想将状态从表格提升到 ComponentWrapper，因为表格应该是可重用的，并且保存按钮可能位于 GUI 中完全不同的位置（例如，在工具栏或菜单中）。

对此有什么想法吗？提前致谢。

4

1 回答 1

1

如果您的表当前正在管理自己的状态，那么您需要提升该状态，或将其移动到某个全局存储中。正如您所说，将保存函数作为回调从树上的某个组件传递，该组件也是保存按钮的父级。

但是更优雅和用户友好的解决方案是使用一些上下文，或者使用redux。

使用上下文，您的保存函数可以将该值传递给上下文对象，该对象可以在树的其他位置检索。有很多关于如何做到这一点的好文章 -这是一篇，这是另一篇。

Redux 与此类似，并且已成为您正在尝试做的事情的最爱。您可以使用 redux reducer 将表数据保存到全局存储，然后您的“保存”按钮可以调用从存储中检索此数据并将其发送到您的 REST 端点，而不管它在树中与表的关系如何。在需要跨多个组件协调状态的大型应用程序中，它绝对是首选。

于 2020-07-31T20:15:34.243 回答