0

我是 React 语言的新手，遇到了涉及打印给定对象/数据结构的问题。

数据结构（JSON？）

{ "boards": [ { "groups": [ { "title": "Introduction" }, { "title": "Page Two" } ] } ] }

我现在可以打印了，this.state.boardData.boards我发现了一些关于map()功能的主题，但似乎无法让它发挥作用。

我的 compentDidMount（涉及 monday.api 和 GraphQL）：

  monday.listen("context", res => {
    this.setState({context: res.data});
    monday.api(`query ($boardIds: [Int]) { boards (ids:$boardIds) { groups { title } } }`, 
      { variables: {boardIds: this.state.context.boardIds} }
    )
    .then(res => {
      this.setState({boardData: res.data});
    });
    
  })

我的地图（）功能：

const navItems = this.state.boardData.boards.map((title) =>
  <a className="pageview__nav-item">{JSON.stringify(title, null, 2)}</a>
);

提供的错误：

TypeError: Cannot read property 'map' of undefined

我猜这是因为当我尝试映射值时这些值是空的。我试图初始化数据但没有运气：

constructor(props) {
    super(props);
    
        // Default state
        this.state = {
          settings: {},
          name: "",
          boardData: {groups: []}
        };
      }

我也尝试初始化变量，但这似乎在抱怨已经声明的变量。

任何人都可以指出我正确的方向吗？那真的很有帮助。

4

1 回答 1

0

您正在尝试在 boardData 更新之前制作地图。

因为这：

构造函数（道具）{ 超级（道具）；

    // Default state
    this.state = {
      settings: {},
      name: "",
      boardData: {groups: []}
    };
  }

在您的代码中：

const navItems = this.state.boardData.boards.map((title) =>
  <a className="pageview__nav-item">{JSON.stringify(title, null, 2)}</a>
);

this.state.boardData.boards不存在，你得到错误：

TypeError: Cannot read property 'map' of undefined

在渲染的 de return 中，您可以在使用地图之前进行验证，以确保该数组具有值。

按照您的 JSON 示例数据：

{ "boards": [ { "groups": [ { "title": "Introduction" }, { "title": "Page Two" } ] } ] }

您将需要为每个板提供一张地图，为板内的每个组提供另一个地图以访问标题

return(
    <>
    {this.state.boardData.boards ? this.state.boardData.boards.map((group) =>
          <div className="groupContainer">
          {
            group.map(title=>
              <a className="pageview__nav-item">{title}</a>
            )
          }
          </div>
          }): null}
    </>
)
于 2020-07-14T12:45:41.730 回答