[英]Functional component props/state/store not updated in function - what's a viable alternative?
First off some description of what I need to achieve.首先对我需要实现的目标进行一些描述。 I show information in front-end (React) that mostly corresponds to database rows and the user can do regular CRUD operations on those objects.
我在前端 (React) 中显示主要对应于数据库行的信息,用户可以对这些对象进行常规 CRUD 操作。 However, I also add some dummy rows into the JSON that I send to front-end because there are some objects that are "defaults" and should not be inserted into the database unless the user actually wants to modify them.
但是,我还在发送到前端的 JSON 中添加了一些虚拟行,因为有些对象是“默认值”并且不应插入到数据库中,除非用户确实想要修改它们。 So what I need to do is once a user wants to modify a "default" object in front-end, I first have to POST that object to a specific endpoint that copies it from constants to the database and only then follow that up with the request to modify that row.
所以我需要做的是,一旦用户想要修改前端的“默认”对象,我首先必须将该对象发布到特定端点,该端点将其从常量复制到数据库,然后再跟进请求修改该行。
Secondly, the architecture around this.其次,围绕这个的架构。 For storing the state of the rows in front-end I'm using Redux via easy-peasy and I have a
thunk
for doing the first saving before modifying.为了在前端存储行的状态,我通过easy-peasy使用Redux,并且我有一个在修改之前进行第一次保存的
thunk
。 Once a user wants to edit a "default" object anywhere in the UI (there are about 20 different ways of editing an object), the flow of the program looks something like this:一旦用户想要在 UI 的任何位置编辑“默认”对象(大约有 20 种不同的编辑对象的方法),程序流程如下所示:
await
edawait
edaction
and updates these objects in store with correct ID-s action
并使用正确的 ID-s 更新存储中的这些对象Now, the problem I run into is from step 5 to 7, because the component looks basically like this:现在,我遇到的问题是从第 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>
);
}
If you know functional components better than I do, then you know that in onSave()
the insertToDatabaseIfNecessary()
will update the values in Redux store, but when we get to the actual modifying and post(...items)
then the values that are POSTed are not updated because they will be updated in the next time the component is called.如果您比我更了解功能组件,那么您就会知道在
onSave()
中insertToDatabaseIfNecessary()
将更新 Redux 存储中的值,但是当我们进行实际修改和post(...items)
POSTed 不会更新,因为它们将在下次调用组件时更新。 They would be updated if this was a class-based component, but easy-peasy has no support for class-based components.如果这是一个基于类的组件,它们会被更新,但是 easy-peasy 不支持基于类的组件。 I guess one way would be to use class-based components and Redux directly but I have feeling there might be a different pattern that I could use to solve my issue without resorting to class-based components.
我想一种方法是直接使用基于类的组件和 Redux,但我觉得可能有一种不同的模式可以用来解决我的问题,而无需求助于基于类的组件。
The question: Is there a sane way of doing this with functional components?问题:是否有一种理智的方法来使用功能组件来做到这一点?
Thunks in easy-peasy can handle asynchronous events, so you should put your axios post in there eg easy-peasy 中的 Thunks 可以处理异步事件,所以你应该把你的 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);
})
This easy-peasy thunk will wait for the async post to finish, so you can use the action as follows in your Foo component:这个简单的 thunk 将等待异步发布完成,因此您可以在 Foo 组件中使用如下操作:
insertToDatabaseIfNecessary();
You will not need to await it or use the onSave function in your Foo component.您不需要等待它或在您的 Foo 组件中使用 onSave 函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.