Table of contents
demand analysis
The requirement is actually very simple, that is, add a personal switch slider in the corresponding table row to enable or disable the single sign-on entry. You only need to modify the corresponding table, add a slider component, and add an interface. So the vegetable chicken blogger, with a snap, wrote the code and handed it in.
As a result, don't slap your face too fast...
problem discovery
The interface can be used, and it can also go. Data can be obtained and rendered.
The whole page structure looks like this. A very simple one-person form, with a few bullet boxes added. 
Looking at the interface directly, the table data is obtained as soon as the page comes in, and then the corresponding data is rendered. The users suffix is the interface for obtaining the table data. Then I click the switch slider to trigger an event and adjust the interface of yumc_app. After the request is successful, the table data is retrieved again. The page was re-rendered, but something weird happened. It was clear that the value of oss_app_status was true but the slider on the page did not become true. It will only re-render when switching routes. And it also caused other problems. So it was sent successfully.
Solution
After searching around, I found that the problem lies in the use of antd's attributes.
Let's look at these two properties first.
It is easy to understand that one is to specify the current state and the other is to specify the initial state. One more thing to understand is,
checked is the current state, which can be updated in real time according to the returned information value.
defaultChecked is the initial state and will only be rendered when the page data is rendered for the first time. It will no longer be under control.
This is how the wrong data is manipulated when using defaultChecked .
Although the interface reported an error, the state on the page was still modified, and the new data requested was not rendered.
Now we switch to checked and we can see that if the data is wrong, the status rendered on the page has not changed.
The data rendered on the page is also consistent with the returned data.
So far the problem has been solved.
Summarize
The problem is very simple, and the solution is also very simple, but the problem revealed is not simple. Not careful enough, such low-level mistakes can be made, and completely avoidable mistakes show that I don't know enough about the basic use of antd. Still need to work hard.
New Year's Day is coming, I wish all the brothers and sisters who read this article a happy holiday and a prosperous new year!