react ssr 报错ReferenceError: XX is not defined

女朋友最近在写公司官网,因为是官网需要seo,就使用react ssr了。她就用next这个框架来写了,因为之前她也没接触过(之前都是写vue,可能想着用react试试)。

突然有一天,贴来一张报错信息。还好我早有准备,预料到她会遇到各种问题,提前看了react的文档和一些demo,大概了解了react的语法和ssr的原理。

她说原来Facebook登陆的库已经引入了啊,为啥还报错。我看完和她解释这是代码在服务器端解析的时候报的错。ssr把getFacebookInfo(0)这个函数给执行了,现在要让他不执行,我就让她把{}改成””, 就不会在服务端执行这个函数了。结果报了这个错

然来是onClick 需要绑定一个function类型,不能绑定字符串类型。

我就让她改成()=>{getFacebookInfo(0)},问题就解决了。


事后我自己写了个demo测试了一下

//pages/test.js
import PropTypes from 'prop-types';

function A(props){
return <div onClick={props.onClick}>{props.children}</div>;
}
function a(e, str){
    str = str || "test";
    console.log(str);
    alert(str);
}


export default function Test(){
    return (<>
    {/* 页面报错 Server Error ReferenceError: alert is not defined */}
    {/* <A onClick={a(1,"test")}> test</A>  */}
    {/* 控制台报错  Warning: Expected `onClick` listener to be a function, instead got a value of `string` type. */}
    {/* <A onClick="alert(1)">test0</A> */}
    {/* 正常 */}
    <A onClick={a}>test1</A>
    <A onClick={(e)=>{a(e,"test2")}}>test2</A>
    </>);
}

react 组件{} 里面的你可以理解为是js代码,框架会解析一遍,最后输出字符串插入文档中。 如果是页面直接报错了,就是服务器端在解析你的代码的时候出错了,你可以看看是不是用到了一些浏览器的变量或函数。如果是控制台报错了,就是浏览器在解析你的代码是出问题了,看看你的代码是不是符合react的语法。

发表评论

电子邮件地址不会被公开。 必填项已用*标注