引用错误：窗口未定义下一个错误

Question

我在next.js中编写了这段代码，但我遇到了一个错误。错误提示"NextJS - ReferenceError:窗口未定义"。你能帮我怎么修吗

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

Answer 1

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

Answer 2

您想要访问窗口对象，但在此解决方案中未定义窗口。将代码添加到用户特效中，并将数据保存到状态。希望能解决你的问题

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