[英]Redux-Toolkit and React Hooks - Store change does not trigger re-render
I'm trying to pre-populate a form with information from the database whenever the URL contains a query parameter with an ID.每当 URL 包含带有 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.我们可以看到 Redux 操作被触发,并且文章状态在商店中更新。 I have also tried to
console.log
inside the hook to verify that it runs, which it does, but only on the initial render.我还尝试在钩子内使用
console.log
来验证它是否运行,它确实如此,但仅限于初始渲染。 If I change initialState
in the slice, then it is reflected in the form.如果我在切片中更改
initialState
,那么它会反映在表单中。
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.请注意,我使用的是Redux-Toolkit ,因此使用了切片语法。 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.然后移除第二个 useEffect。 If this doesn't work, can we see your render jsx code?
如果这不起作用,我们可以看看您的渲染 jsx 代码吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.