ReactJS props.func 不是函数

Question

我发现了许多与此类似的问题以及这些问题的答案，但我还没有找到我已经弄清楚如何应用于我的问题的答案。该应用程序加载良好并显示表单，但在提交时不会创建表格。我仍在学习如何有效地使用道具，所以我不确定我哪里出了问题。

当我尝试提交表单时出现以下错误；

Uncaught TypeError: props.func is not a function
    transferValue AddCombatantTable.jsx:33
    React 14
    unstable_runWithPriority scheduler.development.js:468
    React 15
    js index.js:7
    factory react refresh:6
    Webpack 3

我正在尝试创建一个基于 这个。

这是AddCombatantTable.jsx；

import React, { useState } from 'react';
  
function CombatantForm(props) {
  const [initiative, setInit] = useState('');
  const [name, setName] = useState('');
  const [armorClass, setAC] = useState('');
  const [hitPoints, setHP] = useState('');
  
  const changeInit = (event) => {
    setInit(event.target.value);
  };
  
  const changeName = (event) => {
    setName(event.target.value);
  };
  
  const changeAC = (event) => {
    setAC(event.target.value);
  };

  const changeHP = (event) => {
    setHP(event.target.value);
  };
  
  const transferValue = (event) => {
    event.preventDefault();
    const val = {
      initiative,
      name,
      armorClass,
      hitPoints,
    };
    props.func(val);
    clearState();
  };
  
  const clearState = () => {
    setInit('');
    setName('');
    setAC('');
    setHP('');
  };
  
  return (
    <div>
      <label>Initiative</label>
      <input type="text" value={initiative} onChange={changeInit} />
      <label>Name</label>
      <input type="text" value={name} onChange={changeName} />
      <label>Armor Class</label>
      <input type="text" value={armorClass} onChange={changeAC} />
      <label>Hit Points</label>
      <input type="text" value={hitPoints} onChange={changeHP} />
      <button onClick={transferValue}>Add Combatant</button>
    </div>
  );
}
  
export default CombatantForm;

AddCombatantForm.jsx；

import React, { useState } from 'react';
import CombatantForm from './AddCombatantForm';
import jsonData from './data.json';
  
function TableData() {
  const [combatantData, setCombatantData] = useState(jsonData);
  
  const tableRows = combatantData.map((info) => {
    return (
      <tr>
        <td>{info.id}</td>
        <td>{info.initiative}</td>
        <td>{info.name}</td>
        <td>{info.armorClass}</td>
        <td>{info.hitPoints}</td>
      </tr>
    );
  });
  
  const addRows = (data) => {
    const totalCombatants = combatantData.length;
    data.id = totalCombatants + 1;
    const updatedCombatantData = [...combatantData];
    updatedCombatantata.push(data);
    setCombatantData(updatedCombatantData);
  };
  
  return (
    <div>
      <table className="table table-stripped">
        <thead>
          <tr>
            <th>ID</th>
            <th>Initiative</th>
            <th>Name</th>
            <th>Armor Class</th>
            <th>Hit Points</th>
          </tr>
        </thead>
        <tbody>{tableRows}</tbody>
      </table>
      <CombatantForm func={addRows} />
    </div>
  );
}
  
export default TableData;

应用程序.js；

import TableData from './components/AddCombatantTable';

function App() {  
  return (
    <div className="App">
      <TableData />
    </div>
  );
}

export default App;

Answer 1

请尝试一下

props?.func(val)