文章/答案/技术大牛

发布

社区首页 >问答首页 >添加第二个json对象会导致reactjs web应用程序出现未定义的错误。

问添加第二个json对象会导致reactjs web应用程序出现未定义的错误。
EN

Stack Overflow用户

提问于 2018-01-17 20:16:59

回答 2查看 63关注 0票数 0

我之前的问题是如何通过我使用json服务器的json对象和我目前正在开发的一个小的reactjs web应用程序来映射。当一个对象在mockData中时，一切都正常，但是当我添加第二个对象时，如下所示：

{
  "mockData": [
    {
    "grapevine": [
      { 
        "entity": "67.6.201.77", 
        "category": "scan", 
        "source": "emotet_tracker",
        "rscore": 42 
      },
      { 
        "entity": "67.6.201.77", 
        "category": "popular", 
        "source": "vinter",
        "rscore": 69 
      },
      { 
        "entity": "67.6.201.77", 
        "category": "spam", 
        "source": "uceprotect",
        "rscore": 48 
      },
      { 
        "entity": "67.6.201.77", 
        "category": "c2", 
        "source": "c2_validator",
        "rscore": 41 
      },
      { 
        "entity": "67.6.201.77", 
        "category": "scan", 
        "source": "greenleaf",
        "rscore": 37 
      }
    ]
  },
  {
    "shodan": [
      { 
        "port": 22, 
        "protocol": "TCP", 
        "service": "SSH",
        "banner": "SSH-2.0-libssh-0.2" 
      },
      { 
        "port": 22, 
        "protocol": "TCP", 
        "service": "SSH",
        "banner": "SSH-2.0-libssh-0.2" 
      },
      { 
        "port": 23, 
        "protocol": "TCP", 
        "service": "telnet",
        "banner": "None" 
      },
      { 
        "port": 80, 
        "protocol": "TCP", 
        "service": "HTTP",
        "banner": "GoAhead-Webs" 
      }
    ]
   }
  ]
}

我得到一个TypeError:无法读取未定义的指向以下代码的属性“map”：

  42 | </tr>
  43 | </thead>
  44 | <tbody>
> 45 | {this.state.gvEntries.map(grapevine => (
  46 |   <tr>
  47 |       <td>{grapevine.entity}</td>
  48 |       <td>{grapevine.category}</td>

  13 | componentDidMount() {
  14 | fetch("http://localhost:3000/mockData/")
  15 |   .then(grapevine => grapevine.json())
> 16 |   .then(data => this.setState({ gvEntries: data.grapevine }));
  17 | }
  18 | 
  19 | render() {

如果我添加第二个对象，也就是"shodan“，我是不是不再正确地映射mockData了？我试图将多个json对象传递到仪表板上的不同卡片/面板中。谢谢!

javascript

json

reactjs

api

回答 2

Stack Overflow用户

发布于 2018-01-17 20:23:02

我认为您应该做以下更改: componentDidMount() {

 14 | fetch("http://localhost:3000/mockData/")
  15 |   .then(grapevine => grapevine.json())
> 16 |   .then(data => this.setState({ gvEntries: [data.grapevine] }));
  17 | }

票数 0

Stack Overflow用户

发布于 2018-01-17 20:27:17

您应该考虑这样一个事实，即在调用this.state.gvEntries方法时，render()可能还没有初始化。

您应该在render方法的开头进行检查，以检查它是否存在，或者(最佳实践)，在组件的构造函数中定义状态。

construcotr(props) {
  super(props);  
  this.state = { gvEntries: [] };
}

编辑

通过查看json的结构，应该是this.setState({ gvEntries: data.mockData[0].grapevine })

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48309307

复制

相似问题

问添加第二个json对象会导致reactjs web应用程序出现未定义的错误。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问添加第二个json对象会导致reactjs web应用程序出现未定义的错误。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问添加第二个json对象会导致reactjs web应用程序出现未定义的错误。
EN