Вернуть дочерний массив с помощью Array.Map () в React

Question

Мои данные из API выглядят как показано ниже,

[
  {
    "id": 1,
    "appName": "string",
    "defaultAction": "string",
    "defaultMessage": "string",
    "rules": [
      {
        "id": 1,
        "version": "string",
        "brand": "string",
        "action": "string",
        "message": "string"
      },
      {
        "id": 2,
        "version": "string",
        "brand": "new brand",
        "action": "string",
        "message": "string"
      }
    ]
  }
]

Я попытался, как показано ниже, прочитать дочерний массив из родительского массива из состояния для привязки к таблице

const { posts } = this.state;
console.log(posts);
   const rule_list = posts.map(rules => {
  console.log(rules);
});

Но я вижу, что он по-прежнему возвращает полный массив, а не только дочерний элемент. Может кто-нибудь помочь мне здесь.

Answer 1

Правила - это полный элемент по определенному индексу. Вам необходимо получить доступ к свойству, к которому вы хотите получить доступ, т.е. rules.rules

Или вы можете Destructuring_assignment

let data = [ { "id": 1, "appName": "string", "defaultAction": "string", "defaultMessage": "string", "rules": [ { "id": 1, "version": "string", "brand": "string", "action": "string", "message": "string" }, { "id": 2, "version": "string", "brand": "new brand", "action": "string", "message": "string" } ] } ]

const rule_list = data.map(({rules}) => {
  console.log(rules);
});

Answer 2

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

posts.map((post) => {
   console.log(post.rules);
});

если вы хотите сформировать массив правил из всех сообщений, вы можете сделать это следующим образом:

const rule_list = posts.map((post) => {
        let { rules } = post;
        if(rules && rules.length > 0) {
            return rules;
        }
    });
console.log(rule_list);