Какая правильная конструкция для печати этих JSON данных в React? - PullRequest
Новая
       21

Какая правильная конструкция для печати этих JSON данных в React?

0 голосов
/ 14 июля 2020

Я новичок в языке React и столкнулся с проблемой, связанной с распечаткой данного объекта / структуры данных.

Структура данных (JSON?) 

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

I Я уже могу напечатать 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});
    });
    
  })

Моя функция map (): 

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: []}
        };
      }

Я также попытался инициализировать переменную, но, похоже, он жалуется на уже объявленные переменные.

Кто угодно может указать мне направо направление? Это было бы действительно полезно.

1 Ответ

0 голосов
/ 14 июля 2020

Вы пытаетесь создать карту до обновления boardData.

из-за этого:

constructor (props) {super (props); 

    // 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

Внутри возврата рендера вы можете выполнить проверку перед использованием карты, чтобы убедиться, что у массива есть значения.

Следуя вашим 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}
    </>
)
...