React中使用useEffect发送初始化请求注意事项

忘是亡心i 2023-10-06 23:52 23阅读 0赞

随着Hook的到来，我们可以在一些场景中使用Hook的写法来替代Class的写法。但是Hook中没有setState、componentDidMount等函数，又如何做到从服务器端异步获取数据并渲染呢

如果我们期望从服务器端获取数据并渲染，那么就需要在组件渲染完成时fetch服务端数据，然后通过setData去改变state触发渲染。我们接下来准备用axios来获取数据。

import React, { useState, useEffect } from 'react';
    import axios from 'axios';
     
    function App() {
     const [data, setData] = useState({ products: [{
     productId: '123',
     productName: 'macbook'
     }] });
     
     useEffect(async () => {
     const result = await axios(
     'https://c.com/api/products?date=today',
     );
     
     setData(result.data);
     });
     
     return (
     <ul>
     {data.products.map(i => (
     <li key={i.productId}>
      {i.productName}
     </li>
     ))}
     </ul>
     );
    }
    export default App;

代码中使用到的useEffect就是hook的其中一种，叫effect hook。useEffect会在每次组件渲染的时候触发，我们使用它来获取数据并更新state。但是上面的代码是有缺陷的，你发现了吗？

没错，只要你运行一下，你就会发现程序进入了一个死循环。因为useEffect不仅在组件didMounts的时候被触发了，还在didUpdate的时候被触发了。在useEffect中获取数据后，通过setDate改变state，触发组件渲染更新，从而又进入到了useEffect中，无限循环下去。这并不是我们想要的结果。我们最初想要的，只是希望在didMounts的时候获取一次数据而已。所以，这种情况下，我们必须要给useEffect方法的第二个参数传入一个空\[\]，以使得useEffect中的逻辑只在组件didMounts的时候被执行。

![48d8d2d758d244a6ab071c5c36eb8f93.png][]

import React, { useState, useEffect } from 'react';
    import axios from 'axios';
     
    function App() {
     const [data, setData] = useState({ products: [{
     productId: '123',
     productName: 'macbook'
     }] });
     
     useEffect(async () => {
     const result = await axios(
     'https://c.com/api/products?date=today',
     );
     
     setData(result.data);
     },[]); //重点
     
     return (
     <ul>
     {data.products.map(i => (
     <li key={i.productId}>
      {i.productName}
     </li>
     ))}
     </ul>
     );
    }
    export default App;

虽然看起来这个错误比较低级，但确实比较多人在新上手hook时常常犯的问题。

当然，useEffect第二个参数，也可以传入值。当如果有值的时候，那useEffect会在这些值更新的时候触发。如果只是个空数组，则只会在didMounts的时候触发。

另外，执行这段代码，你会看到控制台警告，Promises and useEffect(async () => ...) are not supported, but you can call an async function inside an effect.。所以如果要使用async，需要修改下写法。

import React, { useState, useEffect } from 'react';
    import axios from 'axios';
     
    function App() {
     const [data, setData] = useState({ products: [{
     productId: '123',
     productName: 'macbook'
     }] });
     
     useEffect(() => {
     const fetchData = async()=>{
     const result = await axios(
      'https://c.com/api/products?date=today',
     );
     setData(result.data);
     }
     fetchData();
     },[]);
     
     return (
     <ul>
     {data.products.map(i => (
     <li key={i.productId}>
      {i.productName}
     </li>
     ))}
     </ul>
     );
    }
    export default App;

当然同一个函数组件里面也可以加入多个useEffect函数，并且互相不影响，可以单独设置触发时机：

![75c7cb8b269e4b3a88bfa34b0702ddda.png][]

[48d8d2d758d244a6ab071c5c36eb8f93.png]: https://img-blog.csdnimg.cn/48d8d2d758d244a6ab071c5c36eb8f93.png
[75c7cb8b269e4b3a88bfa34b0702ddda.png]: https://img-blog.csdnimg.cn/75c7cb8b269e4b3a88bfa34b0702ddda.png