React Hooks只能在功能组件的主体内部调用

Question

如何useEffect()在单击按钮时触发，而不是在渲染组件时触发？

当我在这样的函数中使用它时，出现错误说明：

挂钩只能在功能组件的主体内部调用

function App() {

  function buttonClicked() {  
    useEffect(() => {
      // Fetch from API
    });
  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1 className="App-title">App Title</h1>
      </header>
      <p className="App-intro">
        To get started, edit <code>src/App.js</code> and save to reload.
      </p>
      <button onClick={buttonClicked}>Make API Call</button>
    </div>
  );
}

Answer 1

接受的答案并非完全正确的IMO。如果您的目标是在单击按钮时触发数据提取，则无需useEffect。useEffect用于替换的生命周期钩- ，componentDidMount，componentDidUpdate和componentWillUnmount。

考虑一下-没有钩子，您是否需要这些生命周期钩子才能实现所需的功能？使用类，您只需要使用this.state和单击按钮时触发的回调即可。您将不会使用任何这些生命周期挂钩。

您想要实现的副作用是数据获取，但这是用户触发的效果，useEffect在这里没有帮助。useEffect仅在您希望在组件的生命周期内产生副作用时才有用。

下面的代码应该可以完成您想通过钩子实现的功能，并且您不需要useEffect，只需要useState。

function App() {
  const [user, setUser] = React.useState(null);

  function fetchData() {
    fetch('https://randomuser.me/api/')
      .then(results => results.json())
      .then(data => {
        setUser(data.results[0]);
      });
  };
  
  return <div>
    <p>{user ? user.name.first : 'No data'}</p>
    <button onClick={fetchData}>Fetch Data</button>
  </div>;
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>