reactjs - 在功能组件中渲染时调用 Const 方法

Question

const App = props=> {
  const handleAdition=(abc)=>{
    console.log('called');
   props.dispatch({
     'type':'create',
     'payload':abc
   });
 }
  return (
    <div className="App">
    <AddB handleAdition={handleAdition}/>
    </div>
  );
}

const AddB=props=> {
  let [name, setName] = useState('');
  return (
    <div className="header">
      <div className="form">
      <label for='name'>Name</label>
      <input onChange={e=>setName(e.target.value)}type='text' name='name'/>
      </div>
      <button onClick={props.handleAdition({name})}> Add</button>
    </div>
  );
}

该方法被无限调用，直到堆栈已满。程序失败。我是功能组件的新手。我究竟做错了什么？

Answer 1

改变这个

<button onClick={props.handleAdition({name})}> Add</button> 到

<button onClick={() => props.handleAdition({name})}> Add</button>……

发生这种情况是因为 onClick 需要一个函数......