Возвращаемое значение reduce () не может отображаться в HTML в реакции с использованием функции карты

Question

Мой вывод

var allblogs = [{
    "banner": "41173047269_1594284317134_88820381534.png",
    "approved_status": 1,
    "posted_month": "July",
    "posted_year": "2020",
    "_id": "5f06d9270d63372f7409fe2b",
    "title": "Blog 05 Admin",
    "posted_by": "5eeb50cb9d71910990c6380a",
    "createdAt": "2020-07-09T08:45:27.688Z",
    "updatedAt": "2020-07-09T08:45:27.688Z",
    "__v": 0
  },
  {
    "banner": "63627386743_1594284270142_61158225624.png",
    "photo": "93402529321_1594284276419_88266235152.png",
    "posted_month": "June",
    "posted_year": "2020",
    "_id": "5f06d8fb0d63372f7409fe2a",
    "title": "Blog 04 Admin ",
    "author": "asif",
    "published_Date": "2020-07-22T18:00:00.000Z",
    "posted_by": "5eeb50cb9d71910990c6380a",
    "createdAt": "2020-07-09T08:44:43.901Z",
    "updatedAt": "2020-07-09T08:44:43.901Z",
    "__v": 0
  },
]

let archives = []
archives = allblogs.reduce((r, a) => {
  r[a.posted_month + ' ' + a.posted_year] = [...r[a.posted_month + ' ' + a.posted_year] || [], a]
  return r;
}, []);

console.log(typeof(archives));
console.log(archives);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

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

Answer 1

Ваш reduce вернет object не array. Чтобы получить array, выполните следующие действия.

В вашем reduce вам нужно изменить результат на {} вместо []. Таким образом, он вернет object с key в качестве вашего месяца, т.е. June 2020 и value как [].

Затем вы можете использовать Object.entries(archives), который даст вам массив, например [key, value] для каждый property. Затем введите .map(([k, v]) => ({[k]: v}));, чтобы получить желаемый результат array.

Протестируйте его ниже.

var allblogs = [{
    "banner": "41173047269_1594284317134_88820381534.png",
    "approved_status": 1,
    "posted_month": "July",
    "posted_year": "2020",
    "_id": "5f06d9270d63372f7409fe2b",
    "title": "Blog 05 Admin",
    "posted_by": "5eeb50cb9d71910990c6380a",
    "createdAt": "2020-07-09T08:45:27.688Z",
    "updatedAt": "2020-07-09T08:45:27.688Z",
    "__v": 0
  },
  {
    "banner": "63627386743_1594284270142_61158225624.png",
    "photo": "93402529321_1594284276419_88266235152.png",
    "posted_month": "June",
    "posted_year": "2020",
    "_id": "5f06d8fb0d63372f7409fe2a",
    "title": "Blog 04 Admin ",
    "author": "asif",
    "published_Date": "2020-07-22T18:00:00.000Z",
    "posted_by": "5eeb50cb9d71910990c6380a",
    "createdAt": "2020-07-09T08:44:43.901Z",
    "updatedAt": "2020-07-09T08:44:43.901Z",
    "__v": 0
  }
];

let archives = []
archives = allblogs.reduce((r, a) => {
  r[a.posted_month + ' ' + a.posted_year] = [...r[a.posted_month + ' ' + a.posted_year] || [], a]
  return r;
}, {}); // <-- change [] to {}.

let arrayArchives = Object.entries(archives).map(([k, v]) => ({[k]: v}));

console.log(arrayArchives);