Question

我正在创建一个简单的评论框，用户可以在其中回复评论。我将状态定义如下：

  this.state = {
       comments: [
            {
                id: "TKT4321",
                message: "abc",
               
            },
            {
                id: "TKT34341",
                message: "cccccc",
                reply: [
                    { id: "TKT34343", message: "aaaaa" },
                ]
            },

        ],
        
    }

一个评论对象是一个评论，回复是用户对此评论的回复

          {
                id: "TKT34341",
                message: "cccccc",
                reply: [
                    { id: "TKT34343", message: "aaaaa" },
                ]
            },

我要做的是，当用户对评论进行回复时，例如对ID为“ TKT4321”的评论说，然后在该列表中添加回复对象。例如

              {
                id: "TKT4321",
                message: "abc",
                 reply: [
                    { id: "TKT34343", message: "gfgfg" },
                ]
            },

如果答复已存在于答复数组中，则只需将 {id：“ TKT341113”，消息：“ ftrdgf”} 对象附加到答复< / strong>数组。例如

{ id: "TKT34341", message: "cccccc", reply: [ { id: "TKT34343", message: "aaaaa" }, { id: "TKT341113", message: "ftrdgf" }, ] },

我的名字是：

this.setState((state) => { const { comments } = state.comments return comments.map((item) => ({ ...item, reply: [...item.reply, { id: "TK2222", message: "jkjk" }] })) })

但是，我无法设置状态。我是新来的反应者，我很困惑如何设置嵌套对象的状态。请帮忙。

Answer 1

您将以新状态返回注释，而没有使用comments键，这将覆盖所有状态。相反，请执行以下操作：

 this.setState((state) => {
        const { comments } = state.comments
        return {  // Add an object around the comments
            comments.map((item) => ({
                ...item,
                reply: [...item.reply, { id: "TK2222", message: "jkjk" }]
            }))
        };
    })

如何在React中将对象添加到嵌套状态？

1 个答案: