状态更新时地图功能不会渲染新元素React JS答案

【问题标题】：Map function won't render new element when state is updated React JS状态更新时地图功能不会渲染新元素React JS
【发布时间】：2020-08-26 04:02:48
【问题描述】：

我有 2 个组件，OneBook 组件有一个“添加到收藏”的选项，我有一个 onClick 事件将“收藏”的状态设置为 true（当然默认值为 false）。在我的第二个组件“Collection”中，我有一个 map 函数，如果它的收集状态为真，则返回书籍元素列表（带有标题、作者等）。然而，当我单击“添加到集合”将状态成功设置为 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> : "")
    })
}

【问题讨论】：

您在 OneBook 中设置的收藏只是该状态的属性，它不是图书对象本身的属性
我如何使它成为该书对象的属性？

标签： javascript reactjs use-state react-context

【解决方案1】：

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

如果有帮助请告诉我

Codesandbox link

注意：

正如你要求的解释：

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

我在这里使用了扩展运算符，它本质上保留了书籍对象的所有值，只是更新了收集字段。

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

A = {
 a: 1,
 b: 2
}

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

现在 B 将具有类似这样的结构：

{
 a: 1,
 b: 3
}

【讨论】：

我知道你修好了。谢谢。你能解释一下这一行吗？我不确定它在做什么：return { ...elem, collect: true };

【解决方案2】：

正如我所见，当您单击添加到集合时，您不会在上下文中更新实际的图书对象。

把你的 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

【讨论】：

【解决方案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>

【讨论】：