React使用map()渲染列表时如何给列表项props添加可变更布尔字段

你不需要修改原始data.json的配置，以下两种常用方案都可以实现需求：

方案1：初始化状态时扩展字段 #

在拿到data数据后、存入组件状态前，给每个列表项追加默认isExpanding: false属性即可：

// 示例为React函数组件写法
import rawData from './data.json'
import { useState } from 'react'

const [items, setItems] = useState(() => {
  // 遍历原数组扩展字段，不修改原始json数据
  return rawData.items.map(item => ({
    ...item,
    isExpanding: false
  }))
})

点击按钮切换状态的逻辑参考：

const toggleItem = (targetId) => {
  setItems(prev => prev.map(item => {
    if (item.id === targetId) {
      return {...item, isExpanding: !item.isExpanding}
    }
    return item
  }))
}

渲染时直接用当前item的isExpanding属性控制箭头样式即可，只会修改命中id的项状态，不会影响其他列表项。

方案2：单独维护展开状态集合 #

不想侵入修改原item数据结构的话，可以单独存储处于展开状态的id集合：

// 用Set存储当前展开的项id
const [expandedIds, setExpandedIds] = useState(new Set())

const toggleItem = (targetId) => {
  const newSet = new Set(expandedIds)
  newSet.has(targetId) ? newSet.delete(targetId) : newSet.add(targetId)
  setExpandedIds(newSet)
}

// 渲染时判断逻辑
const isExpanding = expandedIds.has(item.id)

该方案更适合列表数据频繁更新的场景，不需要对原始数据做任何修改。

内容的提问来源于stack exchange，提问作者CCCC