I'm trying to pre-populate a form with information from the database whenever the URL contains a query parameter with an ID. I am unable to make the site trigger a re-render when the information is fetched from the database. The relevant code in the component is shown below.
let { id } = useParams();
const { title, summary, severity, references, type, vulnerabilities } = useSelector(
(state: RootState) => state.articles.article
)
useEffect(() => {
if(id) dispatch(fetchArticle(id))
}, [])
const [form, setForm] = useState<FormState>({
title: title,
type: type,
summary: summary,
severity: severity,
references: references,
vulnerabilities: vulnerabilities,
autocompleteOptions: autocompleteSuggestions,
reference: "",
vulnerability: "",
})
useEffect(() => {
setForm({
...form,
title: title,
summary: summary,
severity: severity,
references: references,
type: type,
vulnerabilities: vulnerabilities
})
}, [title, summary, severity, references, type, vulnerabilities])
We can see that the Redux action is fired and the article state is updated in the store. I have also tried to console.log
inside the hook to verify that it runs, which it does, but only on the initial render. If I change initialState
in the slice, then it is reflected in the form.
let initialState: ArticleState = {
loading: false,
error: null,
article: {
title: "",
severity: 0,
type: 0,
summary: "",
references: [],
vulnerabilities: [],
id: 0
},
articles: [] as Article[],
autocompleteSuggestions: [] as DropdownItem[]
}
const ArticleSlice = createSlice({
name: "articles",
initialState,
reducers: {
getArticleStart: startLoading,
getArticleFailure: loadingFailed,
getArticleSuccess(state: ArticleState, { payload }: PayloadAction<Article>) {
state.article = payload
state.error = null
state.loading = false
}
}
})
export const {
getArticleFailure,
getArticleStart,
getArticleSuccess
} = ArticleSlice.actions
export default ArticleSlice.reducer
Weirdly enough, if I save the code while on the page the hot-reloading does update it and triggers a re-render, populating the form correctly.
Note that I am using Redux-Toolkit , hence the slice syntax. Please let me know if more information is required.
I'm not promising anything but try this, see if it works:
useEffect(()=>{
(async () => {
if (id) dispatch(fetchArticle(id));
await setForm({
...form,
title: title,
summary: summary,
severity: severity,
references: references,
type: type,
vulnerabilities: vulnerabilities
})
})();
}, []);
Then remove the second useEffect. If this doesn't work, can we see your render jsx code?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.