我一直在尝试在next.js应用程序中动态调整图像大小(以使其适用于不同的屏幕大小)，但我尝试和看到的不同方法都给了我无效的钩子调用错误或未定义的窗口错误。 const [width, setWidth] = useState(typeof window === 'undefined' ? 0 : window.innerWidth);
const [height, setHeight] = useState(typeof window === 'undefined' ? 0 : window.innerHeight);
const updateDimen
浏览 16提问于2021-11-04得票数 0
当使用useEffect在Next.js v10中访问屏幕时，我实现了要运行的API。
代码简单地写在下面。
...
const fetchAPI = async () => {
try {
await axios.get({ .... })
} catch (e) {
console.error(e)
}
}
React.useEffect(() => {
fetchAPI()
}, [])
...
当我第一次访问时，useEffect的API正常运行。
但是，如果我转到另一个屏幕，然后再次访问屏幕，useEffect将无法工作。
其他屏幕上的u
浏览 5提问于2020-11-02得票数 1
我试图了解next.js脚本标记和策略beforeInteractive是如何工作的。为了测试我刚用了。但是我一直得到一个ReferenceError：_ is未定义的。我认为当一个脚本装载beforeInteractive时，它应该在我的页面组件中是全局可用的，因为它是从服务器注入到初始Html中的，我可以使用它，例如在useEffect钩子中修改div。有人能解释一下为什么不起作用或者我做错了什么吗？我没有通过npm安装它，因为我试图弄清楚它是如何工作的。
我有一个简单的_document.js，我向这个_document.js添加了一个带有策略beforeInteractive的Next
浏览 4提问于2022-05-21得票数 4
回答已采纳
在我的window Next.js我似乎无法访问的应用程序 未处理的拒绝(ReferenceError)：未定义窗口 componentWillMount() {
console.log('window.innerHeight', window.innerHeight);
} ?
浏览 80提问于2019-03-14得票数 105
回答已采纳
1回答
是否有一种不使用“窗口”即可访问React或Next.js中的设备宽度或高度的方法。或者“文件”。我知道我们可以通过钩子useEffect获得这个结果，而且我们没有这个错误：
ReferenceError: window is not defined
但是如果我只需要访问一次宽度，那就太过分了
import { useEffect, useState } from "react";
const LayoutContainer = ({ Component, pageProps }) => {
const [mobile, setMobile] = useState(
浏览 1提问于2022-04-16得票数 0
如何解决next.js中的本地存储未定义错误。我对next.js和react还很陌生。我知道在检查本地存储数据之前，我们需要进行某种形式的挂载，但我想不出一种方法。我正在尝试保存到本地存储中，这样刷新页面时数据就不会消失 导出常量GlobalContext = React.createContext()； 导出常量GlobalProvider =(属性) => { const initialState = {
watchlist: localStorage.getItem("watchlist")
? JSON.parse(localStorag
浏览 247提问于2021-06-30得票数 1
我还有一个问题：
我想跟踪一些未定义变量window的字段，但它将在将来定义。
例如，如果变量window的内部字段将被更改，我想做一些代码。
useEffect(() => {
if (window && window.innerWidth) {
// Do something
}
}, [window.innerWidth])
但是，next.js和react写道：
如何达到这一效果？谢谢你的建议。
浏览 3提问于2021-01-21得票数 1
回答已采纳
一开始，它是按计划工作的。我不知道发生了什么，但是它随机地开始抛出一个错误"ReferenceError: window是未定义的“。我使用的是Next.js，导致错误的代码位于自定义的react钩子中。
useWindowDimensions.js
import { useState, useEffect } from 'react';
function getWindowDimensions() {
const { innerWidth: width, innerHeight: height } = window;
return {
width,
浏览 3提问于2021-12-06得票数 0
回答已采纳
1回答
如何使用实现下面的代码。
我认为Next.js无法访问window对象存在一个问题，除非您在useEffect(() => {})钩子中。
改变为常规反应，这段代码运行良好。
在不允许这种延迟呈现工作的Next.js生态系统中，我遗漏了什么？
谢谢。
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
impo
浏览 20提问于2022-04-25得票数 1
2回答
我用的是next.js的机车卷轴，在反应v18之后我的清理台停止工作了.谁能解释一下原因吗？
useEffect(() => {
let scroll;
import("locomotive-scroll").then((locomotiveModule) => {
scroll = new locomotiveModule.default({
el: document.querySelector("[data-scroll-container]"),
smooth: true,
});
});
return () =>
浏览 16提问于2022-05-03得票数 1
回答已采纳
我使用的是带有Next.JS/React/Typescript的firebase NPM包。据我所知，有两种方法可以在用户更改时进行监视： useEffect(() => {
// do something
}, [firebase.auth().currentUser]) 像这样的东西 const onAuthStateChanged = () => {
return firebase.auth().onAuthStateChanged((user) => {
// do something
});
};
useEffect(() => {
浏览 20提问于2021-03-23得票数 2
回答已采纳
1回答
我有一个Next.JS的反应类型的应用程序的问题
我有一个控制视频HTML元素的代码如下
const videoRef = useRef<HTMLVideoElement>();
useEffect(() => {
videoRef !== undefined ? videoRef.current.play() : null;
}, []);
通常情况下，一切都很好，但是当我尝试构建应用程序时，命令行表示“对象可能是未定义的”，指的是videoRef。请帮帮忙。
浏览 2提问于2022-08-16得票数 0
回答已采纳
我无法在我的Next.js项目中导入音调。我有一个依赖项，但是当我运行import * as Tone from 'tone'时，它说它找不到从node_modules/tone/build/esm/index.js导入的模块node_modules/tone/build/esm/core/Global。最初，我认为这是浏览器的事情，我必须确保我只在浏览器中导入音调，而不是在节点中导入，而是在useEffect钩子中动态导入(如描述的useEffect)(它只在浏览器中运行)，但它仍然找不到模块。
奇怪的是，浏览器控制台会打印* Tone.js v14.8.38 *，因此显然存
浏览 12提问于2022-04-09得票数 0
1回答
我试图用P5js来绘制一个不断增长的指数型图。我已经成功地绘制了图表本身，但是两边的“尺子/鳞片”是行不通的。我希望“窗口”按照X和Y轴进行缩放，就像下面的例子： ，我试图复制这个动画
我想要图“增长”和尺子/刻度在两边代表增长，X是时间和Y乘数(大文本在中间)。正如我所链接的动画中所看到的，X和Y值在图形超出框后向原点移动。
链接到带有代码的P5编辑器：
浏览 2提问于2020-04-28得票数 0
1回答
我一直认为，在一个setState调用中包含任何形式的useEffect都会导致无限重呈现循环，因为每次呈现都会调用useEffect。但出于某种原因，我的代码很好，我的Next.js应用程序运行得很完美。我能知道我的知识差距是什么吗？
const [base, setBase] = useState(DEFAULT_BASE)
const [rateData, setRateData] = useState([])
const [symbolList, setSymbolList] = useState([])
// At the start, we want to display t
浏览 0提问于2021-03-19得票数 0
回答已采纳
2回答
我是next.js的新手，在index.js的next.js默认页面中，我想把它的路径改为login，有没有人能教我怎么做？现在我正在使用Router.push('/login');，但它产生了闪烁问题，有谁能帮我解决这个问题吗？
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import Router from 'next/router'
import React, { useEffect } from "react
浏览 0提问于2020-08-11得票数 2
在Next.js 9.3中，我需要在初始渲染时访问查询，并将查询结果传递给next/head以更改页面的标题和描述。 我的组件正在从useRouter钩子获取查询。不幸的是，query对象在初始呈现时是{ amp: undefined }。在初始渲染之后，立即进行另一次渲染，它具有所有必需的细节。我开始使用这个变通方法检查路由是否准备好https://github.com/zeit/next.js/issues/8259#issuecomment-544912889，但这对next/head不起作用，因为值将是未定义的。 import React from 'react';
浏览 26提问于2020-05-03得票数 1
2回答
TL/DR:当单击按钮时，我的简单切换功能会触发两次.
我在React (w/ Next.js)组件中使用了Next.js，这样就可以将:root <html>标记作为目标，为此需要对类进行切换。守则如下：
useEffect(() => {
const toggleMode = () => {
const root = document.documentElement;
root.classList.toggle("dark");
console.log("click");
浏览 4提问于2022-06-15得票数 0
回答已采纳
我希望在React渲染后立即滚动到元素中给定的水平位置。对于上下文，我使用带有服务器端呈现的Next.js，所以useLayoutEffect不是一个选项。 export default function WideElement () {
const ref = useRef(null)
useEffect(function () {
ref.current.scrollLeft = 1000
}, [])
return (
<Container ref={ref}>
...
</Container>
)
}
浏览 66提问于2020-01-14得票数 4
试图在屏幕大小变化时获得确切的窗口值。如何将窗口值输入useState()？因为useState不能在条件中使用，而且窗口在useEffect之外是未定义的？
const isSSR = typeof window !== "undefined";
const [windowSize, setWindowSize] = React.useState({
width: isSSR ? 1200 : window.innerWidth,
height: isSSR ? 800 : window.innerHeight,
});
浏览 1提问于2022-02-09得票数 1
回答已采纳
我对Next.js很陌生，通常我会用Rails开发整个应用程序。
我想把rails API和Next.js结合起来。我的JWT后端有一个端点，当JWT令牌在报头中被请求时，返回一个包含用户信息的JSON对象。在我的_app.js中，我试图像这样使用useState和useEffect来验证使用这个后端的用户：
export default function MyApp(props) {
const [user, setUser] = useState({})
useEffect(function () {
const token = localStorage.getItem(
浏览 1提问于2020-11-18得票数 1
回答已采纳
我尝试使用stopPropagation，所以我的下拉菜单将关闭后，我点击任何其他元素。
当我尝试使用stopPropagation &更新布尔状态时，按钮会重新呈现页面(它将状态重置为'false')，而不是将状态更新为true，无论如何它都停留在"true“上。
我为一个例子写了一个代码：
import { useEffect, useState } from "react";
export default function IndexPage() {
const [state, setState] = useState(false
浏览 2提问于2021-02-16得票数 5
回答已采纳
我有一个函数来设置标题高度，这是使用窗口对象。因为我使用Gatsby作为我的SSG，所以在构建过程中窗口不可用。我有一个解决办法(下面)，但这将给我两个错误在gatsby develop期间。
error React Hook "useWindowSize" is called conditionally. React Hooks must be called in the exact same order in every component render
error React Hook "useEffect" is called conditional
浏览 1提问于2021-10-25得票数 0
回答已采纳
1回答
未定义窗口
、、、
我将React Quill添加到Next.js项目中，它运行得很好。但是，当我尝试将ImageResize添加到编辑器时，问题就开始了。
当我加一行时
Quill.register('modules/imageResize', ImageResize)
我犯了个错误
ReferenceError:未定义窗口
我认为问题在于Quill导入，但找不到任何可行的解决方案。
TesxtEditor.tsx
import { useState, useEffect } from 'react'
import dynamic from 'next/dynam
浏览 14提问于2022-10-24得票数 1
我有一个带有useEffect钩子的react组件，如下所示：
const LocationEditor: React.FC<SectionEditorProps> = (props) => {
const [section, setSection] = useState({...(props.section as Location)});
useEffect(() => {
props.onChange(section);
}, [section]);
当我运行这个项目时，我得到了这样的警告：
React Hook useEffect has a missin
浏览 2提问于2021-01-13得票数 5
我知道这里已经出现了多个类似的问题，但我看不出我需要做哪些异步修复才能使这个工作正常进行。
我有一个Next.js网站，我想渲染一个视频，但只有当我们在桌面上。我根本不想让视频在手机上出现，以免用户下载，为了做到这一点，我编写了自己的“反应钩子”来跟踪窗口大小。
我可以在代码中使用isDesktop，这一切都能工作，而且由于我还在开发阶段，所以我添加了窗口调整大小的监听器，这样我就可以轻松地通过调整窗口大小来测试事情，而不是每次重新加载页面。
除了这条令人恐惧的消息外，一切都如预期的那样工作：
Warning: Can't perform a React state update on
浏览 13提问于2022-04-18得票数 0
回答已采纳
在我的next.js组件布局中，我试图检查一个包含div #代码段的模态窗口何时在窗口中可见。
我正在尝试使用IntersectionObserver来检查这一点，但我没有得到输出？
我怎样才能在我的应用程序中查看屏幕上的div #snipcart？
useEffect(() => {
const cartTotal = document.querySelector('#cartTotal') !== null ? document.querySelector('#cartTotal').textContent.replace('£
浏览 2提问于2020-11-06得票数 0
我在一个getStaticProps应用程序中使用Next.js ()，但是当我运行这个应用程序时，它会产生错误：-
warn - Attempted to load @next/swc-win32-x64-gnu, but it was not installed
warn - Attempted to load @next/swc-win32-x64-msvc, but an error occurred: The specified
module could not be found.
\\?\D:\tasks\next-js\node_modules\@next\swc-win3
浏览 20提问于2022-05-13得票数 1
回答已采纳
我正在尝试将CleverTap集成到我的Next.js应用程序中。遵循文档，但面临问题：
服务器错误ReferenceError: Next.js中未定义窗口
_app.tsx
import React, { useEffect, useState } from "react";
import type { AppProps } from "next/app";
import { appWithTranslation } from "next-i18next";
import { Hydrate, QueryClient, Q
浏览 15提问于2021-12-19得票数 -1
回答已采纳
2回答
在React中，我们在重新加载页面时使用useEffect来获取数据： useEffect(() => {
let ignore = false
const fetchingData = async () => {
const res = await fetch(<your_path>)
const data = await res.json()
if (!ignore) setData(data)
};
fetchingData()
return () => { ignore = true }
}, []) 但是我
浏览 39提问于2019-10-14得票数 4
回答已采纳
我有这个react组件。它对我来说工作得很好。 import { Widget } from 'rasa-webchat';
function CustomWidget(){
return (
<Widget
initPayload={"payload"}
socketPath={"/socket.io/"}
customData={{"language": "en"}}
/>
)
}
export de
浏览 33提问于2021-01-15得票数 2
回答已采纳
我有一个header.js组件，它存在于next.js/react项目的每个页面上。
在内部，我创建了一个打字机的旋转效果，因此为了启动它，我将代码放在useEffect中如下：
export default function Header () {
useEffect(() => {
let delay = 2200;
let input = document.getElementsByClassName('myButton')[0],
index = 0;
const cycleText = () =>{
浏览 2提问于2021-02-21得票数 2
2回答
我目前正在开发一个next.js应用程序，我的目标是拥有一个带有声音的“问候动画”。
当动画开始时，我遇到了触发事件的问题，所以我可以启动同步的音乐。
这是我的代码，它显示动画，但不记录任何内容：
import React, { useEffect, useRef } from "react";
import lottie from "lottie-web";
function App() {
const container = useRef(null);
useEffect(() => {
lottie.loadAnimation({
浏览 10提问于2022-01-12得票数 1
回答已采纳
1回答
我需要将一个事件发送到Next.js应用程序中发生在客户端的google，我尝试这样做，但是我无法访问useEffect中的const handleUserClick。
useEffect(() => {
const handleUserClick = () => {
sendEvent(eventTag)
};
}, []);
return ( ...
<a rel="noopener noreferrer" onClick={() => handleUserClick()}>
在SSR站点上发送事件的最
浏览 11提问于2021-12-15得票数 -1
回答已采纳
1回答
如何避免重复的元标签？
、、、、
我正在用next.js开发我的网站。
我的问题
下面的代码在_document.js Head组件中。这些是根元标签。
<meta name="description" content="~~~"/>
<meta name="keywords" content="~~~"/>
当动态创建页面时，这些标记将被创建并插入到Item.js中。
<meta name="description" content={item.product_description}/>
<meta n
浏览 6提问于2021-07-06得票数 1
回答已采纳
1回答
我想建立一个Next.js网站，它应该是多语言。每种语言都有自己的域，因此不需要实现即时语言切换器。它将以下一种方式工作: 1)用户转到website.com，js代码检测用户位置/语言等2)它重定向到带有检测到的语言的网站。
所以我将有一个客户端应用程序，但它应该有不同的语言为不同的领域。
最好的方法是什么？
浏览 0提问于2019-10-31得票数 1
我知道在组件挂载之前，“窗口”或“文档”对象在React组件中是无法识别的。
我正在尝试制作一个下载按钮，从后端服务器接收处理过的excel文件。在我使用React之前，我经常这样实现.
<button onclick="download()">Download</button>
<script>
function download() {
const URL = 'http://dynamic-link.com/sample.xlsx'
window.
浏览 11提问于2021-08-05得票数 1
回答已采纳
我刚刚启动了本机框架，我使用useState和useEffect从api中获取数据并存储在useStete中。当我呈现或尝试从api获取数据时，在第一个日志/呈现中给出的是未定义的数据，而它给了我API的数据。第一个未定义的是为我制造问题，所以我想避免第一个呈现为获取数据。我可以为提供直接的第二次呈现，用于获取数据 for API。
因此，我如何克服这里未定义的问题，直到给我获取数据，或者直接提供第二次呈现，避免第一次呈现未定义的数据。
我真的很感激你的帮助，
提前谢谢！
注:我不想初始化状态以避免未定义的.
const [data, setData] = useState();
us
浏览 11提问于2022-10-28得票数 2
回答已采纳
我在useEffect中获得了对象数组：
然后我试着绘制它并渲染：
我得到的结果是它没有渲染它。首先，默认情况下它是一个空数组，而当状态在useEffect中发生变化时，它不会重新修改它。为什么以及如何解决这个问题？(Next.js + React.js可能会出现一些问题吗？)
浏览 11提问于2022-11-11得票数 0
回答已采纳
1回答
我希望在每个方面都有组件Header，在反应中，您可以通过传递来自react-router-dom的组件来实现这一点，以及如何使用Next.js实现这一点？
我试图遵循本教程，但没有结果：
我还试图实现Next.js文档中的高级内容。
pages/index.js
const Home = ({ products }) => {
useEffect(() => {
console.log(products);
}, []);
return (
<div className="container">
<Head
浏览 1提问于2020-03-07得票数 3
回答已采纳
3回答
useEffect触发一切
、、、、
嗨，我只是想了解一下Next.JS项目中的钩子。已经实现了一个useEffect来侦听滚动行为，目的是在一个标题中显示不同的内容，就是页面被滚动。
const [ scrollY, setScrollY ] = useState(0);
useEffect(() => {
const handleScroll = () => {
setScrollY(window.scrollY);
};
handleScroll();
window.addEventListener(
浏览 4提问于2022-02-18得票数 0
3回答
我试图复制的代码：
依赖关系：“@next/字体”："^13.0.5"，"eslint-config-next"："13.0.4"，"next"："13.0.4"，"react"："18.2.0"，"react-dom"："18.2.0"，"sharp"："^0.31.2"，“三”："0.109.0"，"react-globe"："5.0.2"，“ES6-吐温”："
浏览 4提问于2022-11-26得票数 0
我不明白为什么我的useEffect() React函数不能访问组件的状态变量。当用户放弃在我们的应用程序中创建一个列表并导航到另一个页面时，我试图创建一个日志。我正在使用useEffect() return方法来复制componentWillUnmount()生命周期方法。你能帮上忙吗？
代码样本
let[progress, setProgress] = React.useState(0)
... user starts building their listing, causing progress to increment ...
console.log(`progres
浏览 2提问于2020-05-22得票数 17
回答已采纳
我正试图在我的nextjs静态页面上创建一个PDF查看器，但我不知道如何创建！希望你们能帮我解决这个错误，或者告诉我另一种方法。(我是Next.js新手)我遵循了下面的工作示例
index.js
import SiteLayout from "../../components/SiteLayout";
import React from 'react';
import ReactDOM from "react-dom";
import Viewer from "../resume/viewer.js";
export defau
浏览 14提问于2021-03-29得票数 1
回答已采纳
我正在使用react-p5。当窗口大小改变时，我尝试调整画布的大小。我尝试这样做，方法是添加一个resize事件侦听器，并在每次调整浏览器大小时调用一个函数。 代码： useEffect(() => {
window.addEventListener("resize", windowResized);
return () => window.removeEventListener("resize", windowResized);
});
// Canvas Setup
const setup = (p5, canvasParen
浏览 17提问于2021-04-17得票数 1
回答已采纳
我试图在Next.js中为我的Next.js页面创建一个逻辑，但我似乎不知道如何实现。
其想法是：
获取url (使用useRouter)
调用API (它是一个无头CMS)来获取文章的信息
呈现员额
我现在拥有的是：
[other imports ...]
import { useEffect, useRef, useState } from "react";
import { useRouter } from 'next/router'
const apikey = process.env.NEXT_PUBLIC_BUTTER_CMS_
浏览 5提问于2022-07-29得票数 0
2回答
我有一个显示在全球的菜单组件。在该组件中获取数据的最佳实践是什么？
我试图利用Next.js提供的静态生成，但是来自Next.js团队的所有指导都与页面有关。getStaticProps和getStaticPaths似乎属于页面生成，而不是组件的数据。他们的SWR包是正确的答案，还是阿波罗客户？
通常，在基于钩子的反应中，我只需将数据调用放到useEffect中即可。我不知道如何解释这一点，因为所有内容都是在构建时使用Next呈现的。
浏览 0提问于2020-08-19得票数 15
回答已采纳
1回答
在Piano组件中，我使用钩子(useWindowDimensions())获取窗口的尺寸。在useEffect中，每当窗口宽度发生变化时，我都希望呈现组件。
每次宽度发生变化时，它都会重新呈现组件(因为keyData依赖于它，并且它在dependencyList中)，但是没有在初始呈现中呈现。所以组件在我调整窗口的大小之前不会呈现。
下面的代码是Piano组件。
const svgRef = React.useRef(null);
const svgEl = d3.select(svgRef.current);
const { width } = useWindowDimensions()
浏览 4提问于2021-10-01得票数 0
回答已采纳
我在React中有一个带有ref的类组件，我想在它内部的一个函数组件中访问它。我试着把ref作为一个道具传过去，但是它说它是未定义的。于是我试着用this.refs访问它，但它也是未定义的。 function GetOffset() {
const [offset, setOffset] = useState(0);
useEffect(() => {
function handleScroll() {
console.log(this.refs);
}, [offset]);
} 我想使用getBoundingClientRec
浏览 25提问于2020-10-08得票数 0
回答已采纳
1回答
我正在做一个简单的Next.js应用程序，我是一个新手，我正在使用第三方应用程序接口登录用户，它返回一个JWT，我试图验证每个页面，以便如果JWT过期，用户被重定向到登录，我如何实现这一点？目前我使用的是useEffect，因为路由器只能在客户端使用，但它会加载页面，然后验证JWT，我还能在Next.js中做什么呢？
PD:我不太了解中间件，也不太了解next.js内部的API路由
浏览 7提问于2021-01-05得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
