如何在React中显示JSON文件的内容

Question

我的公用文件夹中有一个静态JSON文件，我想在React(NextJS(组件中输出内容。只需将所有内容再次显示为JSON即可。

import data from '../../public/static/somedata/data.json';
const DummyComponent = () => {
return (
<div className="box">{data}</div>
);
};

目前我得到的错误：

对象作为React子无效

有没有办法在React组件中显示原始JSON内容？

Answer 1

这应该完成以下工作：

<div className="box"><pre>{JSON.stringify(data, null, 2)}</pre></div>

Answer 2

尝试JSON.stringify((

import data from '../../public/static/somedata/data.json';
const DummyComponent = () => {
return (
<div className="box">{JSON.stringify(data)}</div>
);
};