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需要功能...

在功能组件中的渲染上调用const方法

1 个答案: