反应映射嵌套数据

Question

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

未捕获的TypeError：无法读取未定义的属性“名称”

Main.jsx

地图功能：

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

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

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

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

但是，name嵌套在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>

希望对您有帮助！

Answer 2

在React中，通常使用destructuring assignment syntax来达到上述目的，即避免上述混乱，例如：

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

甚至走得更远，因为key不一定必须与您的对象属性相对应：

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