无法在 ReactJS 中更新对象中的元素答案

【问题标题】：Cannot update an element in an object in ReactJS无法在 ReactJS 中更新对象中的元素
【发布时间】：2020-12-09 11:39:48
【问题描述】：

几天来一直在尝试对此进行排序，但无济于事。

在 ReactJS 中有一个对象数组，我试图在其中编辑数组中某个项目的元素：

对象结构如下：

actor: null

aggregate: "Comment"

aggregateId: "5fcf206131414a05bcee9f88"

createdAt: "2020-12-08T06:42:41.983Z"

data: {…}

comment: {…}

author: Object { id: "5ea683231fac57758ae7e4e2", nodeId: "MDQ6VXNlcjI1MTc0ODQ=", username: "monstertrux", … }

body: "ths is an edit testsfsdfsdfths is an edit testsfsdfsdfths is an edit testsfsdfsdfths is an edit testsfsdfsdfths is an edit testsfsdfsdfths is an edit testsfsdfsdfths is an edit testsfsdfsdfths is an edit testsfsdfsdfths is an edit testsfsdfsdfths is an edit testsfsdfsdf\n\nths is an edit testsfsdfsdfths is an edit testsfsdfsdfths is an edit testsfsdfsdfths is an edit testsfsdfsdfths is an edit testsfsdfsdfths is an edit testsfsdfsdfths is an edit testsfsdfsdfths is an edit testsfsdfsdfths is an edit testsfsdfsdfths is an edit testsfsdfsdf\n\nths is an edit testsfsdfsdfths is an edit testsfsdfsdfths is an edit testsfsdfsdfths is an edit testsfsdfsdfths is an edit testsfsdfsdfths is an edit testsfsdfsdfths is an edit testsfsdfsdfths is an edit testsfsdfsdfths is an edit testsfsdfsdfths is an edit testsfsdfsdf"

createdAt: "2020-12-08T06:42:41.983Z"

id: "5fcf206131414a05bcee9f88"

topicId: "5f3e3eb92db37843068c045a"

updatedAt: "2020-12-09T10:32:05.889Z"

<prototype>: Object { … }

<prototype>: Object { … }

event: null

id: "5fcf206131414a05bcee9f88"

message: null```

have been trying to navigate the array and then edit the comment field with the following:

让 itemToEdit = tempTimeline[foundIndex] console.log(itemToEdit)

  itemToEdit = {...itemToEdit, data.comment.body: comment }

which pulls the item to be edited from the array and then tries to edit the data.comment.body element in the hierarchy.

But all I get for my efforts is the following errors:
No value exists in scope for the shorthand property 'data'. Either declare one or provide an initializer.
',' expected.
Type '{ data: any; "": any; comment: string; id?: string | undefined; aggregateId?: string | undefined; aggregate?: string | undefined; event?: string | null | undefined; message?: string | null | undefined; actor?: Member | ... 1 more ... | undefined; createdAt?: string | undefined; }' is not assignable to type 'IssueTimeline'.
  Object literal may only specify known properties, and '(Missing)' does not exist in type 'IssueTimeline'.
',' expected.

Anyone have any idea what I am doing wrong here?

【问题讨论】：

标签： reactjs typescript object

【解决方案1】：

你不能用点表示法指定键，你需要像这样向下遍历：

const yourArray = [...];
const newArray = yourArray.map((item, idx) => {
    if (idx === indexToEdit) {
        return {
            ...item,
            data: {
                ...item.data,
                comment: {
                     ...item.data.comment,
                     body: comment,
                }
            }
        };
    }
    return item;
});

【讨论】：

感谢您的回复，我之前实际上已经尝试过这种方法，但在 ...item.data.comment of Object is possible is 'undefined' 处出现错误。好像是同一个问题
您可以使用 nullish 合并运算符来处理：...(item.data.comment ?? {})