React中setState未触发重渲染问题排查求助

完整组件代码 #

const Column = ({ form, setForm, fieldset, blocks, selectedFieldsetId, setFieldBeingEdited }) => {
  // 将待编辑的区块传递给App组件
  const editField = (e) => {
    const blockId = e.currentTarget.getAttribute('data-blockid')
    const data = form.blocks[blockId]
    setFieldBeingEdited({ active: true, data })
  }

  const deleteBlock = (e) => {
    const blockId = e.currentTarget.getAttribute('data-blockid')
    const updatedForm = { ...form }
    delete updatedForm.blocks[blockId]

    for (const fieldset in updatedForm.fieldsets) {
      for (let i = 0; i < updatedForm.fieldsets[fieldset].blockIds.length; i++) {
        if (updatedForm.fieldsets[fieldset].blockIds[i] === blockId) {
          updatedForm.fieldsets[fieldset].blockIds.splice(i, 1)
          return
        }
      }
    }
    setForm(updatedForm)
  }

  return <BlockList fieldset={fieldset} blocks={blocks} selectedFieldsetId={selectedFieldsetId} editField={editField} deleteBlock={deleteBlock} />
}

问题描述 #

我在React中将对象存储在state中，调用setForm更新状态后，组件并未立即触发重渲染，必须通过页面其他交互触发状态变更，才能显示最新的state内容。如代码所示，我已经先复制state对象再修改，之后调用setForm传入修改后的新对象，请问问题出在哪里？

相关数据结构 #

const initialData = {
  blocks: {},
  fieldsets: {
    [initialFieldsetId]: {
      id: initialFieldsetId,
      blockIds: [],
    },
  },
  fieldsetOrder: [initialFieldsetId],
}

问题原因 #

1. 提前return导致状态更新未执行：在deleteBlock函数中，找到目标blockId并执行splice删除后，直接调用了return语句，这会提前终止整个函数，导致后续的setForm(updatedForm)根本不会执行。只有当循环遍历完所有字段集都没找到对应blockId时，才会执行状态更新，这就导致绝大多数删除操作都没有真正更新state，自然不会触发重渲染。
2. 浅拷贝的引用隐患（次要）：使用{...form}仅做了外层对象的浅拷贝，updatedForm.fieldsets与原state中的form.fieldsets指向同一个引用。虽然React的state浅比较会因为外层对象是新的而触发更新，但直接修改引用类型的内部数据可能导致不可预期的状态污染。

解决方案 #

1. 移除提前return，确保状态更新执行

将删除blockId后的return改为break（跳出内层循环），避免终止整个函数，保证setForm能被调用：

const deleteBlock = (e) => {
  const blockId = e.currentTarget.getAttribute('data-blockid')
  const updatedForm = { ...form }
  delete updatedForm.blocks[blockId]

  for (const fieldsetKey in updatedForm.fieldsets) {
    const fieldset = updatedForm.fieldsets[fieldsetKey]
    for (let i = 0; i < fieldset.blockIds.length; i++) {
      if (fieldset.blockIds[i] === blockId) {
        fieldset.blockIds.splice(i, 1)
        break // 跳出内层循环，不再遍历当前字段集的blockIds
      }
    }
  }
  setForm(updatedForm) // 确保执行状态更新
}

2. 对嵌套对象进行深拷贝（可选，推荐）

为了避免浅拷贝带来的引用问题，建议对嵌套的fieldsets也进行拷贝，确保修改的是完全独立的新对象：

const deleteBlock = (e) => {
  const blockId = e.currentTarget.getAttribute('data-blockid')
  // 深拷贝form对象，避免引用原state
  const updatedForm = {
    ...form,
    blocks: { ...form.blocks },
    fieldsets: Object.fromEntries(
      Object.entries(form.fieldsets).map(([key, fieldset]) => [
        key,
        { ...fieldset, blockIds: [...fieldset.blockIds] }
      ])
    )
  }
  delete updatedForm.blocks[blockId]

  for (const fieldsetKey in updatedForm.fieldsets) {
    const fieldset = updatedForm.fieldsets[fieldsetKey]
    const index = fieldset.blockIds.indexOf(blockId)
    if (index !== -1) {
      fieldset.blockIds.splice(index, 1)
      break
    }
  }
  setForm(updatedForm)
}

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