javascript - 双重渲染useEffect Reactjs-6ren

javascript - 双重渲染useEffect Reactjs

转载作者：行者123 更新时间：2023-12-01 00:06:40

27

4

我尝试使用 react 上下文提供程序获取异步获取数据我不明白为什么有两个使用上下文的子组件渲染，第一个初始上下文状态，第二个包含获取的数据。有什么适当的方法可以避免吗？

codesandbox example

最佳答案

这实际上是正常行为。由于您的获取请求是异步的，因此需要一些时间才能解决。

首先，您的组件使用默认数据进行渲染(根据 DogProvider.js，第 5 行为空数组)，然后一旦您的获取解析，您就会更新提供程序的状态，导致它(及其子级)重新渲染。

关于javascript - 双重渲染useEffect Reactjs，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60323543/

27

4

0

文章推荐： c# - 在 C# 中从磁盘读取位图的子部分

文章推荐： .net - ASP.NET MVC : OutputCache and http headers

文章推荐： MySQL : How can i protect to make field value negative

javascript - 我想知道将 `useEffect()` 与空依赖数组一起使用与不使用 `useEffect()` 本身之间的区别
我知道没有数组的 useEffect() 只在第一次渲染时运行回调。那么useEffect(()=>{},[])和没有useEffect()的区别是什么。我的意思是: function myCom
reactjs - 在 useEffect 外部定义函数并在其内部调用该函数与在 useEffect 内部定义函数有什么区别？
我的场景很少，我想了解渲染和性能方面的差异。下面显示的示例是一个简单的函数，但请考虑一个更复杂的函数以及一个异步函数。场景 1:定义函数并在 useEffect 中调用它。 useEffect((
javascript - 如何在不重新触发 useEffect 的情况下访问 useEffect 中的状态？
我需要添加一些与 React 之外的对象交互的事件处理程序(以 Google map 为例)。在这个处理函数内部，我想访问一些可以发送给这个外部对象的状态。如果我将状态作为依赖项传递给效果，它可以
reactjs - 当有多个 useEffect 时，跳过第一个 useEffect
要限制 useEffect 在第一个渲染上运行，我们可以这样做: const isFirstRun = useRef(true); useEffect (() => { if (isF
reactjs - 多个 useEffect React.useEffect 缺少依赖项
我有一个产品组件，它显示某个类别的产品。CategoryId 从路由参数中获取，然后用户可以对产品进行分页。所以有2个useEffect，一个是改变categoryId的时候，另一个是改变当前页码的时
reactjs - 多个 useEffect React.useEffect 缺少依赖项
我有一个产品组件，它显示某个类别的产品。CategoryId 从路由参数中获取，然后用户可以对产品进行分页。所以有2个useEffect，一个是改变categoryId的时候，另一个是改变当前页码的时
javascript - 我可以将多个 useEffect 重构为单个 useEffect 吗？
我的状态宽度随着窗口大小的调整而变化，showFilters作为 Prop 从true变为false。我想在卸载时删除监听器。因此，我为每个条件使用了三个 useState。那么，我可以做任何重构来在
reactjs - 在 useEffect 中使用 useState 值而不使状态更新 useEffect
我正在开发一个基于对象键管理字符串数组的函数。假设它看起来像这样: import React, { useState, useEffect } from "react"; import FieldCo
javascript - useEffect(fn, []) 中包装的代码与 useEffect(fn, []) 外部的代码有什么区别？
新的 React Hooks 功能很酷，但有时会让我感到困惑。特别是，我将此代码包装在 useEffect Hook 中: const compA = ({ num }) => { const [
reactjs - React - useEffect 钩子(Hook) - componentDidMount 到 useEffect
我想将其转换为 useEffect钩: 代码 componentDidMount () { this.messagesRef.on('child_added', snapshot => {
reactjs - React Hook useEffect 缺少依赖项(没有在 useEffect 中移动函数)
这是我的代码部分。一切正常，但 eslint 给出错误。 React Hook useEffect has missing dependencies: 'dispatch' and 'getData'
reactjs - 两个 useEffect 与一个 useEffect 内的两个 API 调用
当组件安装时，我需要从两个 API 端点获取数据。现在我有: useEffect(() => { dispatch(loadSomeDataOne()); }, [dispatch])
reactjs - 两个 useEffect 与一个 useEffect 内的两个 API 调用
当组件安装时，我需要从两个 API 端点获取数据。现在我有: useEffect(() => { dispatch(loadSomeDataOne()); }, [dispatch])
javascript - React hook useEffect() 底层。使用 useEffect 安排的效果是否会阻塞主线程？
在 React DOCs 中，关于 useEffect() 钩子(Hook)，我们得到: “使用 useEffect 安排的效果不会阻止浏览器更新屏幕。” Tip Unlike componentDi
reactjs - 了解 React 钩子(Hook) useEffect 函数。useEffect 中的回调函数(即取消订阅)何时被调用？
我一直试图了解何时取消订阅(useEffect 中的回调)被准确调用。这是codepen链接:https://codepen.io/deen_john/pen/eYmNdMy 代码 : const
javascript - 我应该导入 useState 和 useEffect 还是可以使用 React.useState 和 React.useEffect ？
当对状态、效果、上下文等使用钩子(Hook)时，我这样做: import React, { useState, useEffect, useContext } from 'react'; 但是，我注意
javascript - useEffect 中异步函数的 React Hook 警告 : useEffect function must return a cleanup function or nothing
我正在尝试像下面这样的 useEffect 示例: useEffect(async () => { try { const response = await fetch(`ht
reactjs - 避免在组件加载时对组件使用多个 useEffect
我在我的 React 应用中构建了一个简单的点赞、书签功能。 const [liked, setLiked] = useState(); const [bookmarked, setBookmarke
reactjs - useEffect 对抓取函数有什么影响？
我想了解为什么在代码块的底部使用 useEffect，以及它的用途。我认为它与组件生命周期和避免无限循环有关，但我无法完全理解它并全面了解这一切。如果有人能向我解释幕后发生的事情，以及 useEffe
javascript - useEffect 清理中的执行顺序
useEffect(() => { return history.replace({ pathname: "path/A", }); }, []); useEffe

首页

博学

6Ren·AI

商城

javascript - 双重渲染useEffect Reactjs