reactjs - React.js 挂钩状态未更新
问题描述
我有一个名为stories的州,我在每个故事中都有一个公寓列表,在每个公寓中,都有一个区域列表。我正在尝试在公寓中添加一个新区域,但它正在替换现有数据。这是显示我如何在故事中添加公寓详细信息的代码
let story = stories.find((story) => story.sid == storyID);
const storyWithDetails = {
...story,
appartmentDetails: [
...story.appartmentDetails,
{
apartment_name: apratmentName,
apartment_num: apratmentNum,
apartment_type: apartmentType,
areaDetails: [],
},
],
};
const otherStoris = stories.filter((story) => story.sid != storyID);
const newStories = [...otherStoris, storyWithDetails];
newStories.sort((a, b) => parseInt(a.sid) - parseInt(b.sid));
setStories(newStories);
现在我正在尝试通过以下代码添加区域,但它正在替换区域而不是添加新区域。如何解决这个问题?
let story = stories.find((story) => story.sid == storyIndex);
let apartment = story.appartmentDetails.find(
(apartment) => apartment.apartment_num == apartmentID
);
let apartmentWithArea = {
...apartment,
areaDetails: [
...apartment.areaDetails,
{
area_name: areaName,
areaImages: "",
},
],
};
console.log(apartmentWithArea);
编辑
如果我尝试像这样初始化状态
const [stories, setStories] = useState([
{
name: "1st Story",
sid: 1,
appartmentDetails: [
{
apartment_name: "Dummy",
apartment_num: "1",
apartment_type: "",
areaDetails: [{ area_name: "Bath", areaImages: "" }],
},
],
},
]);
并尝试添加新区域 apartmentWithArea工作正常,但如果我想添加第三个区域apartmentWithArea替换第二个区域。
解决方案
推荐阅读
- error-handling - “如何知道'服务器是否在线'而不在 socket_connet 中出现 php 错误”
- swift - 直接从 UITabBarController 和通过 UINavigationController 选择 UIViewController
- java - 在java中使用正则表达式将文本文件分成块
- javascript - 从两个对象创建一个对象数组
- c# - 如何将 SelectedItems 发送到 DataRowView 数组?
- spring - 如何修复java Spring bean Autowire无法处理(123)'{'
- php - 从 PHP 导出 XLS 文件并替换旧文件
- spring-boot - 从表中删除一行 Thymeleaf Springboot
- c - C 返回重复字符的个数
- angular - 得到一个错误“预期的间谍
被称为“角6茉莉花”