React子组件调用父组件setDynamicRows方法时报未定义错误求助

问题原因及修复方案 #

1. 核心错误：inputTable=true场景下的ItemTable实例未接收到setDynamicRows属性 #

你提到handleCheckboxClick调用无报错，大概率是你测试两个函数的场景对应不同的ItemTable实例：

• 测试复选框功能的是inputTable=false的ItemTable，父组件调用时传了setDynamicRows属性，所以调用正常
• 测试输入框功能的是inputTable=true的ItemTable，父组件调用时未传setDynamicRows属性，所以函数内部访问props.setDynamicRows时得到undefined，抛出不是函数的错误。你可以尝试在这个输入页面点击复选框，同样会触发相同报错。

修复方法：找到父组件调用ItemTable且传入inputTable={true}的代码，补传setDynamicRows属性，值为对应的状态更新函数。

2. 隐藏错误：handleInputChange函数存在参数和上下文问题 #

即便修复了第一个问题，该函数依然会报错，存在两个问题：

• 未接收事件参数e，内部访问e.target会抛出未定义错误
• 函数内访问props.row.id属于上下文错误，row是你遍历props.rows的局部变量，ItemTable本身的props不存在row属性，访问会得到undefined

修复方法：

1. 改造handleInputChange定义，接收事件和行id作为入参：

const handleInputChange = (e, rowId) => {
  props.setDynamicRows((prevState) => {
    const newTableData = [...prevState];
    const rowIndex = findWithAttr(newTableData, "id", rowId);
    newTableData[rowIndex][e.target.name] = e.target.value;
    return newTableData;
  });
};

2. 渲染ItemTableRow时绑定当前行的id：

// inputTable=true分支的ItemTableRow补充属性
<ItemTableRow
  title={props.title}
  headings={props.headings}
  handleCheckboxClick={handleCheckboxClick}
  dynamicRows={props.dynamicRows}
  index={index}
  row={row}
  hasCheckbox={props.hasCheckbox}
  handleInputChange={(e) => handleInputChange(e, row.id)}
  setDynamicRows={props.setDynamicRows}
/>

可选优化 #

两个分支渲染ItemTableRow的重复属性可以用对象展开简化，避免后续漏传属性：

const commonProps = {
  title: props.title,
  headings: props.headings,
  handleCheckboxClick,
  dynamicRows: props.dynamicRows,
  row,
  index,
  hasCheckbox: props.hasCheckbox,
  setDynamicRows: props.setDynamicRows
}
// 渲染时直接展开
<ItemTableRow {...commonProps} handleInputChange={(e) => handleInputChange(e, row.id)} />

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