如何解决状态更新时,地图函数不会呈现新元素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> : "")
})
}
解决方法
您没有适当地更新上下文中的书籍价值,并且收集价值对上下文中的原始书籍数组没有影响。看看下面的代码和框。
让我知道是否有帮助
注意:
您要求对此进行解释:
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)}....
,
这是因为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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。