使用 useState 更新复杂对象

Question

我正在尝试执行一组状态函数并仅更改一个值。

这就是对象，例如，我想将索引 [0] 中的 book1（即 name1）从 true 更改为 false。

我不明白怎么做

我正在尝试的一切都只是覆盖了对象的一部分

{
      book1: [
        { name: 1, selected: true },
        { name: 2, selected: false },
        { name: 3, selected: false },
        { name: 4, selected: false },
        { name: 5, selected: true },
      ],
      book2: [
        { name: 1, selected: false },
        { name: 2, selected: false },
        { name: 3, selected: true },
        { name: 4, selected: false },
        { name: 5, selected: true },
      ],
    }

Answer 1

因为对象处于状态，所以不能直接修改它。相反，您必须创建该对象和您更改的任何内部对象（包括数组）的副本。查看评论：

// Use the callback form because you're updating state based on existing state
setTheObject(original => {
    // Shallow copy the object and book1
    const update = {...original, book1: [...original.book1]};
    // Replace the object at index 0 with a new updated object
    update.book1[0] = {...update.book1[0], selected: false};
    // return the update
    return update;
});

技术上可以在一个嵌套操作中完成此操作，但更难以阅读和调试：

// Use the callback form because you're updating state based on existing state
setTheObject(original => ({
    // Shallow copy the object
    ...original,
    // Shallow copy `book1` while updating index 0 with a copy of the object with the updated property
    book1: Object.assign([], original.book1, {0: {...original.book1[0], selected: false}}),
}));

不推荐。 :-D

Answer 2

const [books, setBooks] = useState({
      book1: [
           { name: 1, selected: true },
           { name: 2, selected: false },
           { name: 3, selected: false },
           { name: 4, selected: false },
           { name: 5, selected: true }
          ],
      book2: [
           { name: 1, selected: false },
           { name: 2, selected: false },
           { name: 3, selected: true },
           { name: 4, selected: false },
           { name: 5, selected: true }
          ]
 });

假设你拿着书是这样的。现在像这样更新书籍状态。

setBooks({
  ...books,
  book1: books.book1.map((book) =>
    book.name === 1 ? { ...book, selected: !book.selected } : book
  )
});

为了查看state改变后的效果，可以在useEffect hook中添加依赖，一旦书籍改变，你就会在useEffect中看到更新后的state。

useEffect(() => {
  console.log(books);
 }, [books]);

使用 useState 更新复杂对象

Updating complicated Object with useState

javascript

object

reactjs

react-hooks

use-state