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

问题描述

我有2个组件，OneBook组件具有“添加到收藏夹”选项，我有一个onClick事件，可将“收藏夹”的状态设置为true（当然，默认值为false）。在我的第二个组件“集合”中，我有一个map函数，如果其收集状态为true，则该函数返回书元素列表（包括书名，作者等）。但是，当我单击“添加到收藏集”将状态成功设置为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> : "")
    })
}

解决方法

您没有适当地更新上下文中的书籍价值，并且收集价值对上下文中的原始书籍数组没有影响。看看下面的代码和框。

让我知道是否有帮助

Codesandbox link

注意：

您要求对此进行解释：

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

我在这里使用传播运算符，该运算符本质上保留了book对象的所有值，只是更新了collect字段。

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

A = {
 a: 1,b: 2
}

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

现在B将具有以下结构：

{
 a: 1,b: 3
}

,

如我所见，当您单击添加到收藏夹时，您不会在上下文中更新实际的书本对象。

将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

,

这是因为collect状态与书本对象没有关系。因此，您需要创建一个更新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>