Метод 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 ожидает функцию ...