React中通过map函数更新state嵌套对象isChecked属性的问题

问题排查与修正方案 #

常见故障点 #

• 相等判断使用了松散相等==，nanoid生成的id为字符串类型，若传入的connectionId/channelName存在类型差异，会导致匹配失败，建议替换为严格相等===
• 确认调用handleChange时传入的connectionId、channelName值正确，不存在未定义/值不匹配的情况
• 若你的需求是统一设置选中状态而非切换，直接把!doc.isChecked替换为对应布尔值即可（全选设为true，取消全选设为false）

修正后代码 #

const handleChange = () => {
  const ConnectionsArray = List.map(connection => 
    connection.id === connectionId 
      ? {
          ...connection,
          channels: connection.channels.map(channel => 
            channel.Name === channelName 
              ? {
                  ...channel,
                  Files: channel.Files.map(file => ({
                    ...file,
                    documents: file.documents.map(doc => ({
                      ...doc,
                      // 切换状态就保留!doc.isChecked，固定全选/全不选就直接写true/false
                      isChecked: !doc.isChecked
                    }))
                  }))
                }
              : channel
          )
        }
      : connection
  )
  setList(ConnectionsArray)
}

可选优化方案 #

如果觉得深层嵌套map可读性差，可以用immer库简化不可变更新逻辑，示例如下：

import { produce } from 'immer'

const handleChange = () => {
  const newList = produce(List, draft => {
    const targetConn = draft.find(conn => conn.id === connectionId)
    if (!targetConn) return
    const targetChannel = targetConn.channels.find(ch => ch.Name === channelName)
    if (!targetChannel) return
    targetChannel.Files.forEach(file => {
      file.documents.forEach(doc => {
        doc.isChecked = !doc.isChecked
      })
    })
  })
  setList(newList)
}

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