React应用Props函数报错：props.handleAddRow不是函数问题求助

问题1：Uncaught TypeError: props.handleAddRow is not a function #

这个问题的核心是ArticleModal组件未接收到handleAddRow props，按以下步骤排查修复：

• 确认props传递链路：
  1. 父组件POForm需先将handleAddRow函数传给InputTable：

     // POForm 函数组件示例
     const POForm = () => {
       const handleAddRow = (newRowData) => {
         // 处理新增行逻辑
       };
       return <InputTable handleAddRow={handleAddRow} />;
     };
     

  2. InputTable组件要把接收到的handleAddRow透传给ArticleModal：

     // InputTable 函数组件示例
     const InputTable = (props) => {
       return (
         <div>
           {/* 表格及Add Line按钮代码 */}
           <ArticleModal handleAddRow={props.handleAddRow} />
         </div>
       );
     };
     

• 类组件绑定检查：如果使用类组件，确保handleAddRow通过箭头函数定义，或在构造函数中绑定this，避免函数丢失：

  // POForm 类组件示例
  class POForm extends React.Component {
    handleAddRow = (newRowData) => {
      // 处理新增行逻辑
    };
    render() {
      return <InputTable handleAddRow={this.handleAddRow} />;
    }
  }
  

问题2：新增行显示[object object] #

这是因为直接渲染了整个对象而非对象的具体属性，修复方式：

• 渲染表格行时访问对象属性：
  假设行数据结构为{ id: 1, articleName: "示例文章", content: "内容" }，渲染单元格时需指定具体属性：

  // InputTable 中表格行渲染代码
  <tbody>
    {rows.map(row => (
      <tr key={row.id}>
        <td>{row.articleName}</td>
        <td>{row.content}</td>
        {/* 其他单元格 */}
      </tr>
    ))}
  </tbody>
  

• 检查新增行的初始化数据：确保handleAddRow中新增的是结构正确的对象，未直接将对象作为字符串渲染：

  // 正确的新增行逻辑示例
  const handleAddRow = () => {
    const newRow = { id: Date.now(), articleName: "", content: "" };
    setRows([...rows, newRow]);
  };
  

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