Question

我正在使用reactjs，nodejs来构建项目并创建一个组件Dummy.json，在其中插入以下代码：

var Dummy={
    "items":[
        {
            "id":1,
            "name":"manish"
        },
        {
            "id":2,
            "name":"Ashok"
        }
    ]
}

export default Dummy;

现在，我想像下面这样在App.js中导入该组件：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Dummy from './Dummy.json';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <p>{this.Dummy.items}</p>
      </div>
    );
  }
}

export default App;

当我遇到错误时该怎么做

无法编译。

./ src / Dummy.json语法错误：JSON中的意外令牌v在位置   0       在JSON.parse（）

Answer 1

将{this.Dummy.items}转换为{Dummy.items}。

Answer 2

首先，您的Dummy.json不是组件。完全不清楚您期望在这里发生什么。

关于您遇到的特定错误，这是因为Dummy.json根本不是json文件，而是js文件。 json文件应仅是json格式的文本。因此，您可以这样做：

// Dummy.json
{
  "items":[
    {
      "id":1,
      "name":"manish"
    },
    {
      "id":2,
      "name":"Ashok"
    }
  ]
}

// in App.js
import Dummy from './Dummy.json'

但是，除非有必要将此文件设为json，否则您应该将其视为js文件。将其重命名为Dummy.js，然后像导入其他任何js文件一样将其导入：

// in App.js
import Dummy from './Dummy'

在两种情况下，您都可以使用（例如）Dummy.items获取items数组。再次说明，这不是不是组件，而是尝试以您的方式呈现它（即<p>{Dummy.items}</p>，不需要this），可能会引发错误（ “对象作为React子对象无效”。

我们可以制作json数据的reactjs组件并在项目中使用它通过导入导入数据

2 个答案: