Question

如何在单击按钮而不是呈现组件时触发List<WifiConfiguration> networks = manager.getConfiguredNetworks(); for(WifiConfiguration c : networks) { if (isThisWifiAppSpecific(c.SSID)) { manager.enableNetwork(c.networkId, true); return; } }？

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

只能在函数组件的主体内部调用钩子

useEffect()

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>

Answer 2

像您这样的声音误解了useEffect的用法。就像componentDidUpdate钩子一样-它是根据值更改而不是直接由某些函数触发的。调用render方法时，也会调用useEffect。很难说出您的目标是什么，但是从您的摘录中，仅调用fetch而不带任何钩子就很有意义。但是要回答您的问题，触发useEffect的一种方法是更新您的状态，并且您可以创建useEffect钩子，仅在更改特定属性的值时才触发：

const [buttonClicked, setButtonClicked] = useState(false);

useEffect(() => {
  // Fetch from API
}, [buttonClicked]); 

<button onClick={() => setButtonClicked(true)}>Make API Call</button>

现在，单击时将触发useEffect，但是由于您添加了, [buttonClicked]，因此如果其他任何属性值发生更改，则不会调用它。

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

2 个答案: