为什么axios调用useEffect只返回一次数据？答案

【问题标题】：Why is Axios call in useEffect returning data only once?为什么axios调用useEffect只返回一次数据？
【发布时间】：2021-07-29 09:55:21
【问题描述】：

我想知道为什么来自 axios 的 api 调用的数据只返回一次，而每隔一次它是一个预定义的空数组。代码如下：

let { id } = useParams();
var [activity, setActivity] = useState([]);
var [loading, setLoading] = useState(true);

useEffect(() => {

    axios.get("http://localhost:8080/api/auth/admin", {
        headers: {
            'Content-Type': 'application/json',
            'x-access-token': AuthHeader()['x-access-token']
        }
    }).then((response) => {
        if (response.data.unauthorized) {
            AuthService.logout();
        }
    });

    axios.get(`http://localhost:8080/api/auth/get_activity/${id}`).then((response) => {
        setActivity(response.data);
        setLoading(false);
        console.log(activity);
    });


}, [id]);

现在，当用户点击另一个页面上的链接时，history.push(/user-activity/${value._id} 将他带到此页面，并且 useParams 的 id 用于 axios.get 收集数据并显示它，但它只发生在我添加或删除 useEffect 条件中的 id 并刷新页面。关于如何解决这个问题的任何想法？

【问题讨论】：

你的问题真的不清楚，请编辑并解释更多并告诉我们这些事情（问题是什么，期望是什么，输出是什么）
好吧，我以为我已经解释过了，但这里再次强调：每次访问页面时，都应该从 axios get 方法中设置活动 response.data，正如您在问题中看到的那样。但它始终是空数组，因为它在 begingin 中定义。没有来自响应的数据。当我在 Postman 中使用调用时，它可以正常工作，但在应用程序中却不行。
您在设置后立即记录活动，设置状态是异步操作，必须正确处理
您能否更好地解释您的答案，我删除了console.log，仍然是同样的问题，没有来自api调用的数据。
另外，你的 api 调用是否依赖于这个axios.get("http://localhost:8080/api/auth/admin")？

标签： javascript reactjs

【解决方案1】：

useEffect() 在每次后续重新渲染或更新时运行。现在，如果我们传递第二个参数（这是一个包含要监视的状态变量列表的数组），我们可以跳过它。你已经通过了它，[id] 但现在 react 只会在此数组中的一项更改时重新运行副作用。

您的状态变量是否正在更新/更改？因为如果不是那么它就不会被触发，因为它认为它是相同的而不是唯一的。

【讨论】：

好吧即使我在useEffect中不加id，还是一样的，它返回一个空响应。我需要它在每次重新渲染时运行。
然后去掉第二个参数，不传，每次都会重新渲染。但请确定你是否真的需要它。
正如我已经提到的，即使它被删除，在每次重新渲染时它都会返回一个空数组。
我的意思是什么都不通过。就像你这样做[] 还是根本不传递第二个参数，这就是我的意思，就像这样useEffect(() => { console.log('Component mounted') })
我只需添加 [] 即可。当我不添加任何内容时，它会无休止地执行，然后返回数据 - 无休止地。