基于映射项状态的条件类渲染

Question

https://codesandbox.io/s/vjonpw8xzl （不响应，在新窗口/整页中查看以正确查看）

期望的结果：当点击每张卡片上的向下（展开）图标时，它们彼此独立操作，通过切换className: 'show'和className: 'hide'来打开/关闭展开的菜单className: expanded

发生了什么：应用中的状态正在更新，当单击展开图标时，所有展开的菜单都同时打开。

我明白为什么会这样，我只是不知道如何解决它。

如果是我自己的数据，我会将其添加到状态中的每个对象

isExpanded:false

并切换它，但由于大量数据来自 API，我不知道如何执行此操作。任何帮助表示赞赏。

Answer 1

您需要确定哪些状态实际上定义了组件并且是它所需要的。由于isExpanded 和toggleExpanded 是character 组件特有的，它们应该驻留在该组件中。

Answer 2

您可以将其移动到 Character 组件并删除所有 isExpanded / toggleExpanded 属性，而不是在 isExpanded 组件中处理您的状态逻辑。