Next.js中getStaticProps传递的数据被对象包裹该如何解决？

问题原因 #

• React/Next.js 页面组件的第一个入参是整个props对象，getStaticProps 返回的 props 配置里的所有字段，都会挂载到这个props对象上。你当前把组件入参直接命名为data，拿到的就是完整的props对象，你需要的数组只是这个对象下的data属性值。
• 两次typeof data都返回object是JavaScript的固有特性：数组属于引用类型，typeof运算符对所有非函数的引用类型统一返回object，如果需要判断值是否为数组，可以使用Array.isArray()方法。

修正方案 #

方案1：解构props获取目标数组（推荐） #

在组件入参位置直接解构出data属性，拿到的就是你需要的对象数组：

const Home: NextPage = ({ data }) => {
    console.log(data) // 此处打印的就是getStaticProps中拿到的数组
    useEffect(() => {
    document.body.append(
        Plot.barY(data, {x: "letter", y: "frequency"}).plot()
    )
 }, [])
 ...
}

方案2：访问props对象下的data属性 #

如果不需要修改入参命名，直接给绘图函数传入data.data即可：

Plot.barY(data.data, {x: "letter", y: "frequency"}).plot()

内容的提问来源于stack exchange，提问作者Alejandro Zapien