Question

首先，我需要实现一些描述。我在前端（反应）中显示了大多数与数据库行相对应的信息，并且用户可以对那些对象执行常规的CRUD操作。但是，我还将一些虚拟行添加到发送到前端的JSON中，因为有些对象是“默认值”，除非用户真正想要修改它们，否则不应将其插入数据库。因此，我需要做的是，一旦用户想要在前端修改“默认”对象，我首先必须将该对象发布到特定的端点，该端点将其从常量复制到数据库中，然后再进行处理。请求修改该行。

第二，围绕它的架构。为了在前端存储行的状态，我通过easy-peasy使用Redux，并且有一个thunk用于进行修改前的第一次保存。一旦用户想要在UI的任何位置编辑“默认”对象（大约有20种不同的编辑对象方式），程序的流程将如下所示：

用户编辑某些内容并按“保存”
Thunk在保存函数中被调用并await被编辑
Thunk POST到后端，以将对象插入数据库并返回相应的行
后端使用行的ID进行响应
Thunk调用action并使用正确的ID更新存储中的这些对象
Thunk返回，并且函数指针移回修改函数
修改功能再次发出具有正确ID的请求
修改功能使用修改后的值更新商店

现在，我遇到的问题是从第5步到第7步，因为该组件基本上看起来像这样：

const Foo = () => {
    const insertToDatabaseIfNecessary = useStoreActions((actions) => actions.baz.insertIfNecessary)
    const items = useStoreState((state) => state.baz.items);

    const onSave = async () => {
        await insertToDatabaseIfNecessary();

        // do the actual modifying thing here
        axios.post(...items);
    }

    return (
        <button onClick={onSave}>Save!</button>
    );
}

如果您比我更了解功能组件，那么您就会知道onSave()中的insertToDatabaseIfNecessary()将更新Redux存储中的值，但是当我们进行实际修改和{{1} }则将不更新POST的值，因为它们将在下次调用该组件时更新。如果这是基于类的组件，则将对其进行更新，但是easy-peasy不支持基于类的组件。我猜一种方法是直接使用基于类的组件和Redux，但是我觉得可能有一种不同的模式可以用来解决我的问题，而不必诉诸于基于类的组件。

问题：使用功能组件是否有理智的方法？

Answer 1

简单事件中的问题可以处理异步事件，因此您应该在其中放置axios帖子，例如

insertToDatabaseIfNecessary : thunk(async (actions, payload) => {
    // First update the data on the server
    await axios.post(payload.items);

    // Assuming that the post succeeds, now dispatch and action to update your store.
    // (You'd want to check your post succeeded before doing this...)
    actions.updateYourStoreData(payload);
})

这个简单的混混将等待异步发布完成，因此您可以在Foo组件中使用以下操作：

insertToDatabaseIfNecessary();

您不需要等待它，也不需要在Foo组件中使用onSave函数。

功能组件props / state / store的功能未更新-有什么可行的选择？

1 个答案: