表格复选框勾选后输入组件丢失输入状态问题排查

我正在实现一个包含文本字段的Table组件，提交时需验证空字段；若复选框被勾选，则无需验证该行。但取消复选框勾选后，文本字段会丢失之前输入的值。

录屏演示：

我的代码 #

interface InconsistenciesTableProps {
  inconsistencies: Inconsistency[] | null;
  onSubmit: (value: InconsistencyRequestData) => void;
}

const InconsistenciesTable = ({inconsistencies,onSubmit}: InconsistenciesTableProps) => {
  const [selectedRows, setSelectedRows] = useState<RowSelectionState>()
  const [showError, setShowError] = useState<boolean>(false)

  useEffect(() => {
    setShowError(false)
    
    if(selectedRows) {
      selectedRows?.forEach(row => {
        updateInconsistencies(row,'status','success')
      })

      const inconsistenciesIds = inconsistencies?.map(data => {return data.id})
      const unSelectedRows = inconsistenciesIds?.filter(id => !Array.from(selectedRows).includes(id))
      unSelectedRows?.forEach(row => {
        updateInconsistencies(row,'status','invalid')
      })
    }
  },[selectedRows])

  const updateInconsistencies = (id: string, key: string, value: string) => {
    const inconsistencyIndex = inconsistencies?.findIndex(data => data.id === id)
    inconsistencies[inconsistencyIndex] = {
      ...inconsistencies[inconsistencyIndex],
      [key]: value
    }
  }

  const explanation = (id: string, val: string) => {
    updateInconsistencies(id,'explanation',val)
  }

  const checkHasError = (inconsistency: Inconsistency) => {
    return showError && inconsistency.status === 'invalid' && inconsistency.explanation === ''
  }
  
  const tableBody = (inconsistencies: Inconsistency[]): TableRows[] => {
    return inconsistencies?.map(inconsistency => {
      const tableCells: TableCells[] = [
        {
          id: 'quantity_'+inconsistency.id,
          content: inconsistency.quantity
        },
        {
          id: 'explanation_'+inconsistency.id,
          content: <ExplanationForm 
            isVisible={!selectedRows?.has(inconsistency.id)} 
            value={inconsistency.explanation || ''} 
            onChange={val => explanation(inconsistency.id,val)} 
            hasError={checkHasError(inconsistency)}
          />
        }
      ]
      return {
        id: inconsistency.id,
        content: tableCells
      }
    })
  }

  const handleOnSubmit = () => {
    setShowError(true)
    const isInconsistency = validityComparison()
    
    if(!isInconsistency) {
      selectedRows?.forEach(row => {
        updateInconsistencies(row,'explanation','')
      })
      const requestData: InconsistencyRequestData = {
        inconsistencies: inconsistencies
      }
      onSubmit(requestData)
    }
  }

  return (
    <>
      {inconsistencies &&
        <Table 
          content={tableBody(inconsistencies)} 
          onRowSelectionChange={setSelectedRows}
          state={{rowSelection: selectedRows || new Set()}}
        />
      }
      <Button className="uppercase" text="CONFIRM AND SEND" onClick={handleOnSubmit} />
    </>
  )
}

export default InconsistenciesTable

更新记录 #

• 代码在Sandbox中运行正常，但本地环境存在异常，同时希望得到代码优化方向的建议。
• 重写代码后定位到问题出在Table内使用的表单字段中，更新后的Sandbox出现新错误。

恳请协助排查问题原因并提供解决方案。

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