next.js 引用错误：下一个窗口中未定义错误

dphi5xsq 于 2022-12-12 发布在其他

关注(0)|答案(2)|浏览(197)

我在next.js中编写了这段代码，但是遇到了一个错误。窗口未定义”。您能帮助我如何修复它吗

function IconWeatherComponent({icon}) {
    
    let [svg, setSvg] = useState('');
    
    
    useEffect(() => {
        const setIcon = () => {
            if (icon === '01d') {
                setSvg('day.svg')
            }
            if (icon === '01n') {
                setSvg('night.svg')
            }
        setIcon();
    }, [icon])
    
    
    return (
        <div>
            <img src={`${window.location.origin}/weather-icons/${svg}`} width="70" height="70" alt=""/>
        </div>
    );
}

export default IconWeatherComponent

next.js

来源：https://stackoverflow.com/questions/74708606/referenceerror-window-is-not-defined-error-in-nexts

2条答案

按热度按时间

hl0ma9xz1#

window不是在构建时定义的，因此不能直接在JSX中访问它。它只在浏览器中定义。您只需要在运行时在useEffect钩子中检查位置。

function IconWeatherComponent({icon}) {
    
    let [svg, setSvg] = useState('');
    const [location, setLocation] = useState('');
    
    useEffect(() => {
        const setIcon = () => {
            if (icon === '01d') {
                setSvg('day.svg')
            }
            if (icon === '01n') {
                setSvg('night.svg')
            }
        setIcon();
    }, [icon])
    
    useEffect(() => {
        if (typeof window !== 'undefined') {
            setLocation(window.location.origin)
        }
    }, []
    
    return (
        <div>
            <img src={`${location}/weather-icons/${svg}`} width="70" height="70" alt=""/>
        </div>
    );
}

export default IconWeatherComponent

赞(0）回复(0）举报 2022-12-12

nkoocmlb2#

您要访问窗口对象，但此解决方案中的窗口尚未定义。请将您的代码添加到usseefect并将数据保存到state。希望能解决您的问题

Usseefect (()=>{Setwindowlocation(window.location.origin)},[])

赞(0）回复(0）举报 2022-12-12

我来回答

next.js 引用错误：下一个窗口中未定义错误

2条答案

相关问题

热门标签

最新问答