如何阻止 useEffect 一遍又一遍地重复答案

【问题标题】：How do I stop useEffect from repeating over and over again如何阻止 useEffect 一遍又一遍地重复
【发布时间】：2021-05-30 07:39:15
【问题描述】：

import { useState, useEffect } from 'react';
import axios from 'axios';

export const GetData = (url) => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const getData = async () => {
      try {
        const response = await axios.get(url);
        setData(response.data);
      } catch (error) {
        console.error(error);
      }
    };
    getData();
    return () => {};
  }, [data]);

  return {
    data,
  };
};

我将上面的组件用于多个多个组件。我的问题是请求不断重复。我想阻止它重复。它应该重复的唯一时间是“数据”发生变化时。我尝试使用 axios 的取消令牌，但没有奏效。我还尝试使用间隔来停止它（也许我做错了。我不知道）。下面的代码显示了我正在使用 GetData 组件的组件之一。希望这会有所帮助。

import React from 'react';
import { Card, Table, Button } from 'react-bootstrap';

import { DeleteData, GetData } from '../../../api';
import { useGlobalContext } from '../../../context';

const SectionTable = ({ url }) => {
  const { setIsEdit, getId } = useGlobalContext();
  const { data } = GetData(url);

  return (
    <>
      <Card style={{ maxHeight: '500px', overflowY: 'scroll' }}>
        <Card.Body>
          <Table striped responsive hover>
            <thead>
              <th>Section Level</th>
              <th>Section Name</th>
              <th></th>
              <th></th>
            </thead>
            <tbody>
              {data.map((section) => {
                return (
                  <tr key={section.id}>
                    <td>{section.section_level}</td>
                    <td>{section.section_name}</td>
                    <td>
                      <Button
                        variant='warning'
                        onClick={() => {
                          getId(section.id);
                          setIsEdit(true);
                        }}>
                        Edit
                      </Button>
                    </td>
                    <td>
                      <Button
                        variant='danger'
                        onClick={() => DeleteData(section.id)}>
                        Delete
                      </Button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </Table>
        </Card.Body>
      </Card>
    </>
  );
};

export default SectionTable;
```**strong text**

【问题讨论】：

你不是说url 改变的时候..？
不，我需要更改数据，因为我希望数据实时更新。注意：是的，我知道我应该只使用 websockets，但有人建议我这样做太多了。
如果 Web 套接字完全按照您的要求完成，为什么它太多了？
然后你需要使用例如保持重新加载数据的计时器。 github.com/streamich/react-use/blob/master/docs/useInterval.md 是一个很好的钩子。
试过了，但它每秒钟都在重复。还不如使用 websockets

标签： reactjs axios rerender

【解决方案1】：

将数据列为依赖项意味着效果会在每次由data 中的更改触发的渲染之后运行。而是依赖于 url:

  useEffect(() => {
    const getData = async () => {
      try {
        const response = await axios.get(url);
        setData(response.data);
      } catch (error) {
        console.error(error);
      }
    };
    getData();
    return () => {};
  }, [url]);

【讨论】：

我需要数据来更新，因为我希望它是实时的，我可以只使用 websocket，但我被告知不要这样做。
所以您希望在刚收到新数据时获取新数据？
不，我希望在新数据可用时获取新数据。即每当数据发生变化时。
您指定的依赖关系与您的 react 应用程序中的数据有关，如果您想收到有关新数据可用的通知，Web 套接字听起来是个不错的选择。