JavaScript |Оператор спреда обновляет вложенное значение

Question

Я пытаюсь обновить вложенное значение объекта, используя оператор распространения.Я впервые использую это, и я считаю, что я довольно близок к достижению своей конечной цели, но я просто не могу понять, что мне действительно нужно делать дальше.

У меня есть массив, который структурированнапример:

[
    {
        name: "Category 1",
        posts: [
            {
                id: 1,
                published: false,
                category: "Category 1"
            },
            {
                id: 2,
                published: true,
                category: "Category 1"
            }
        ]
    },
    {
        name: "Category 2",
        posts: [
            {
                id: 3,
                published: true,
                category: "Category 2"
            },
            {
                id: 4,
                published: true,
                category: "Category 2"
            }
        ]
    }
]

При нажатии кнопки я пытаюсь обновить опубликованное значение, и, поскольку я использую React, мне нужно установить состояние.Поэтому мне порекомендовали обновить с помощью оператора распространения.

onPostClick(post) {
    post.pubished = !post.published;
    this.setState({...this.state.posts[post.category], post})
}

Если я выйду из системы с результатом {...this.state.posts[post.category], post}, я вижу, что опубликованное добавляется к родительскому элементу, который формируется:

{
    name: "Category 1",
    published: false,
    posts: [
        ...
    ]
}

Очевидно, что это не ожидаемый результат, я хочу, чтобы он обновил фактический объект в объекте posts.

Я пытался сделать что-то вроде this.setState({...this.state.posts[post.category].posts, post}), но я получил сообщение, что оно не определено.

Answer 1

просто добавим, мы знаем, что есть много способов добиться успеха, может быть, вы тоже захотите попробовать этот путь тоже ..

onPostClick = post => {
    let published = this.state.data.map((item, i) => {
      item.posts.map((item_post, i) => {
        if (item_post.category === post.category) {
          item_post.published = !post.published;
        }
      });
    });
    this.setState({ ...this.state.data, published });
 };

Answer 2

Вы не можете получить доступ к своим данным с помощью this.state.posts[post.category].posts данные в объектах массива.

Вы можете создать фильтр, чтобы найти объект вашей категории в массиве и изменить значение его сообщений.

onPostClick(post) {
    //CLONE YOUR DATA
    var postArray = this.state.posts;

    //FIND YOUR CATEGORY OBJECT IN ARRAY
    var categoryIndex = postArray.findIndex(function(obj){
        return obj.name === post.category;
    });

    //FIND YOUR POST AND CHANGE PUBLISHED VALUE
    postArray[categoryIndex].posts.forEach(function(item){
       if (item.id === post.id) {
           item.published = !item.published;
       } 
    });
    //SET TO STATE TO RERENDER
    this.setState({ posts: postArray});
}

Это должно работать, если ваше имягосударства верно.