在反应中选择列表项，而不是从客户端

Question

假设我在 react jsx 中有一个列表

<ul>
    <li>stuff</>
    <li>stuff</>
    <li>stuff</>
    <li>stuff</>
    <li>stuff</>
</ul>

我将如何选择列表项之一？我的意思不是在客户端，我可以只附加一个点击监听器。但是假设我从服务器收到一条消息，我需要对列表中的第三项进行处理。到目前为止，我一直在做的是将列表项设置为状态，然后例如，如果我想删除中间项，我只需使用不包含中间项的新列表更新状态。这样做的问题是，如果列表很大，那么不断删除和重新创建一个巨大的列表似乎是不好的做法，或者也许我不想删除/添加任何列表项，而是执行诸如添加一些文本或动画之类的操作特定的列表项。

Answer 1

使用对象数组

您希望不断修改大量数据而不进行复制。您还希望对某些项目（但不是全部）执行其他操作。您现在可能正在使用数组，这将使实现这些事情变得困难。

另一方面，对象数组提供了更大的灵活性。在数组有索引的情况下，对象可以具有任意 ID 和其他属性。

例如：

let myObj = [
{
  id: 0,
  text: 'Text from the DB',
  showSpecialTextColor: false,
  showSpecialAnimation: false,
},
{
  id: 1,
  text: 'Another text value.',
  showSpecialTextColor: false,
  showSpecialAnimation: false,
},
{
  id: 2,
  text: 'This text should display with special styling.',
  showSpecialTextColor: true,
  showSpecialAnimation: true,
},
]

现在，您可以根据项目的 ID 及其索引向此父对象添加或删除项目。这不需要复制或更改对象的其余部分。

myObj.map(item => {
            if (item.id = 2) {
                delete item
            }
        })

showSpecialTextColor是您可以在对象上创建的任意属性。您可以让渲染组件检查此属性并根据其值更改样式或逻辑。

如果您的数据库以数组格式返回数据，那么当您第一次从数据库检索数据时，您始终可以将其转换为对象。