javascript - 反应 setState 不更新 UI 上的状态
问题描述
我有一系列项目。当我在 UI 中输入项目编号时,该项目将被添加到数组中并被显示。我通过控制台登录并看到该项目已添加到数组中,但未显示在 UI 上。
例如,我目前在数组中的项目 1、2、3、4 为 [1、2、3、4]。当我添加 5 时,数组将更新为 [1, 2, 3, 4, 5],但 5 未显示在 UI 上。
这是相关代码:
export const generateItemsState = (prevState, itemErrors, testItems) => {
const { project, items, updatedProject, validationErrors } = prevState;
const newState = {};
if (itemErrors && itemErrors.length) {
// irelevant
} else {
// no item errors
newState.updatedProject = Object.assign(updatedProject, { items: testItems });
}
return newState;
}
setItemsInStateAfterValidation(itemErrors, changedTestItems) {
const newState = generateItemsState(
this.state,
itemErrors,
changedTestItems
);
if (!itemErrors || !itemErrors.length) {
this.setState(newState, () => {
this.props.onUpdate(
this.state.updatedProject
)
});
} else {
this.setState(newState);
}
}
请给我一些指导,谢谢!
解决方案
你已经改变了状态:
newState.updatedPorject = Object.assign(updatedProject, { items: testItems });
反应的第一条规则,不要改变状态。它应该是:
newState.updatedPorject = Object.assign({}, updatedProject, { items: testItems });
或同等学历:
newState.updatedPorject = { ...updatedPorject, items: testItems }
推荐阅读
- intellij-idea - Intellij 中文件上的红色方块是什么意思?Scala 错误在新机器上构建项目
- kdb - 在整个表 KDB 中用空值替换无穷大
- python - 如何将 JSON 转换为字符串?
- c++ - 如何在 Godbolt 上使用 Google Benchmark
- c# - 当我尝试选择用户名并将其放入字符串时,为什么 C# 会给我一个错误?
- c - strcpy 给出分段错误
- c - 如何在 C 中打印 .10 而不是 .1?
- android - 为什么 checkAndRepleaceImage 方法不起作用?
- python - Unity WebRequest POST 请求到 python 应用程序 | 如何在python中接收数据?
- javascript - 如何使用 Mustache JS 进行条件渲染?