我应该如何编写此条件以使按钮 onClick 函数对我的数组执行我想要的操作？

Question

我有一个 object 数组，基本上是这样的。

const characters = [
{
id: 1
name: batman
biography: {
born-in: gotham
good-or-bad: good
}
stats: {
strength: 85
speed: 90
intelligence: 95
}
}
{
id: 2
name: superman
biography: {
born-in: krypton
good-or-bad: good
}
stats: {
strength: 90
speed: 85
intelligence: 80
}
}
{
id: 3
name: joker
biography: {
born-in: gotham
good-or-bad: bad
}
stats: {
strength: 70
speed: 95
intelligence: 100
}
}
]

然后，在我的页面中映射并显示 object 之后，我添加了一个按钮，允许用户将角色标记为收藏。用户最多只能添加6个收藏。

const [favorites, setFavorites = useState([]);

const addFavorite = () => {
favorites.length === 6 ?
console.log("favorites' list is full!") :
setFavorites(favorites.concat(character))
}

{characters.map((character)=>{
const {props} = character;
return (
<div>{props}</div>
<button onClick={addFavorite}>add to favorites</button>
);
})}

现在，我想做什么（在多次次尝试后，我不知道该怎么做）

防止用户将同一个角色添加到收藏夹两次。（我试过 favorites.contains(character)? or favorites.contains({character})? 但没用。）
如果该角色已经是收藏夹，则将按钮更改为删除收藏夹 的按钮（更改函数和按钮文本。）（我不知道该怎么做）。
对所有收藏夹的每项统计数据进行平均得分。（例如，对于您选择的最爱，您的平均速度是 xxx，您的平均力量是 xxx）。
最后但同样重要的是，收藏列表必须有最多 3 个好角色和 3 个坏角色。所以，如果收藏列表中的好角色或坏角色已经3、用户不能选择其他好的或坏的角色作为收藏。我也不知道这个怎么办。

我在一个学校项目中工作，我找到了大部分的方法，但我意识到我还有很多东西要学，主要是关于 object 道具以及如何访问它们。谢谢你。如果有什么不清楚的地方，请说出来，我会添加所需的数据。

Answer 1

所以，既然你已经自己想通了，这里有详细的解释。

find 是一个函数（或者花哨的开发人员喜欢说的高阶函数）可用于接受 函数的 javascript 数组，该函数必须 return布尔值 即 true 或 false.

---快速绕道---

必须 return 布尔值的函数称为谓词，如果您将鼠标悬停在 IDE 提示上，这正是可用的find

---绕行结束---

它接受多个参数，只有谓词是必需的，其余的都是可选的，我跳过了所有可选的，所以这是你的功课，阅读这个答案末尾的文档或文章。

正如您在提示本身中所读到的那样，它会为数组中的每个元素调用一次谓词，直到找到一个将 return true & return 元素的值，否则 undefined。

这意味着：谓词中的第一个参数将是您的 object，并且将为所有元素执行相同的谓词。

现在仔细观察你的解法：

find( savedChar => savedChar.id === character.id )

savedChar是数组中的object之一，需要与character、object、id进行比较是 identity 的缩写形式，总能准确找到它。

最后，快速解答您的问题。

使用find查看该角色是否已经可用，如果是，则不要将其添加到您的collection。
这将需要您更改渲染逻辑，find 如果 object 在 favorites 中并以不同方式渲染它。
就像find一样，有个方法叫reduce，你要不要试试看？但这可能有点困难，因此您可以改用简单的 for 循环。
find(savedChar => savedChar["good-or-bad"]) <- 结果会怎样？搞清楚。

更多阅读 material： https://medium.com/swlh/array-helper-methods-in-es6-28fc5e5a5dc9

相同但更详细： https://codeburst.io/learn-and-understand-es6-helpers-easily-d41401184487

我应该如何编写此条件以使按钮 onClick 函数对我的数组执行我想要的操作？

How should I write this conditions to make the button onClick function do what I want with my array?

javascript

arrays

destructuring

reactjs

use-state