javascript - React 映射嵌套数据

Question

我的 React 应用程序遇到问题。当我将新项目发布到后端时，我单击按钮返回到站点仪表板，在其中我可以查看项目列表，但出现以下错误:

Uncaught TypeError: Cannot read property 'name' of undefined

Main.jsx

map 功能:

{props.sites.map((site) => (
 <tr key={site.id}>
 <td data-label="Project">{site.site.name}</td>
          ... //remaining code

但是，如果我重新加载页面，则会显示所有数据。

在 React Developer Tools 中，如果我查看 props 的传递方式，我可以将 name 视为可用数据之一。

|_sites
  |_ 0
   |_id" 22
   |_site
      |_id: 44
      |_name: "test"

但是，name 嵌套在 site 下，而 site 又嵌套在 sites 下。

使用.map函数时，我必须使用关键字site来呈现站点列表。这是否会导致与我的后端数据结构中已有的关键字网站发生冲突？

    this.state = {
      sites: [],
      siteFormData: {
        name: '',
      },
   }

如果是这样，解决此问题的最佳做法是什么？

Answer 1

从您的数组结构来看，一旦您尝试访问实际上并不存在的 site.site.name ，您似乎犯了一个错误。相反，它应该是site.name。

从技术上讲，在第一种情况下，site.site 变为 undefined，它没有 name 属性，这就是您收到该错误消息的原因。

只需更正该行，如下所示:

<td data-label="Project">{site.name}</td>

希望对您有所帮助!