状态更新时，地图函数不会呈现新元素 React JS

Question

我有 2 个组件，OneBook 组件有一个选项“添加到 collection”，我有一个 onClick 事件将“收集”的状态设置为 true（默认值当然是 false）。在我的第二个组件“Collection”中，我有一个映射函数，如果它的收集状态为真，则 returns 一个书籍元素列表（带有标题、作者等）。然而，当我点击“添加到 collection”成功将状态设置为 true 时（因为我控制台记录了它并且状态正在更新），地图功能没有显示元素，即使它们有收集状态设置为真。

为清楚起见，这是我的代码。或者可以看代码沙盒直接编辑代码：https://codesandbox.io/s/stupefied-lewin-06f6m?file=/src/OneBook.js

OneBook.js

const [collect, setCollect] = useState(true)

return (
<small onClick={() => {setCollect(true);console.log(collect)}} className="addcollect"><i className="fas fa-bookmark bookmark"></i>Add To Collection</small>
)

Collection.js

{
   books.map(book => {
      return (book.collect? <li><img src={book.img} alt="img"/>{book.title} <span>{book.author}</span></li> : "")
    })
}

Answer 1

您没有正确更新上下文中的书籍值，并且收集值对上下文中的原始书籍数组没有影响。看看下面的codesandbox。

如果有帮助请告诉我

Codesandbox link

注：

正如您要求的解释：

return { ...elem, collect: true };

我在这里使用展开运算符，它基本上保留了 books 对象的所有值，只更新了 collect 字段。

让我们看下面的一个例子：

A = {
 a: 1,
 b: 2
}

B = {...A, b: 3}

现在 B 将具有如下结构：

{
 a: 1,
 b: 3
}

Answer 2

据我所知，当您单击“添加到 collection”时，您并未在上下文中更新实际书籍 object。

将您的 onClick fn 更改为此

const setCollect = (value) => {
  //loop though all the books and change the collect property of the book after the add to collection click
  const showedBook = books.map(b => {
    if (b.isbn !== props.isbn) {
      return b;
    }

    return {
      ...b,
      collect: value,
    };
  });

  setBooks(
    [...showedBook]
  );
};


);

};

<small onClick={() => setCollect(true)}....

updated demo

Answer 3

因为collect状态与book对象无关。所以你需要创建一个函数来更新 books.

const addToCollection = () => {
    books.map((book) => {
      if (book.isbn === props.isbn) {
        console.log(book.isbn)
        book.collect = true;
      }
    });

    return;
  };

然后在“添加到集合”按钮上的点击事件中调用它。

<small
   onClick={() => {
   addToCollection();
   }}
   className="addcollect"
 >
   <i className="fas fa-bookmark bookmark"></i>Add To Collection
</small>

状态更新时，地图函数不会呈现新元素 React JS

Map function won't render new element when state is updated React JS

javascript

reactjs

react-context

use-state