Блог

Я пытался получить ключ объекта массива для отображения в качестве заголовка таблицы, но не смог использовать карту в react. используя console.log, я смог увидеть, что он возвращает правильное значение, которое он возвращает пустым в HTML.

Вот мой код

 <tr>
{fileList.forEach((titleList) => {
      const title = [];
       title.push(Object.keys(titleList))
        // console.log(title) 
       title.map((item, key) => {
         // console.log(item)
           return <th key={key} scope="col">{item}</th>
        })
    })
}
</tr>
 

Данные json были отсюда: https://jsonplaceholder.typicode.com/posts/1/comments
Вот мой полный код проекта, если вы хотите проверить: https://codesandbox.io/s/dry-wave-gu0ns?file=/src/listPage/ListPage.js

Спасибо!

Что бы вы ни делали внутри forEach, это не попадет в ваш JSX, даже если вы возвращаетесь map внутрь forEach .

Либо переместите весь код в другую функцию, либо попробуйте следующий подход

 <tr>
{fileList.map((titleList) => {
      const titles = Object.keys(titleList);
        // console.log(title) 
       return titles.map((item, key) => {
         // console.log(item)
           return <th key={key} scope="col">{item}</th>
        })
    })
}
</tr>
 

таким образом, все, что когда-либо перенастроено, fileList.map отображается на странице.

Другой подход, использующий функцию

 function getHeaders(fileList) {
let headers = [];

fileList.forEach((titleList) => {
      const title = [];
       title.push(Object.keys(titleList))
        // console.log(title) 
       const head = title.map((item, key) => {
         // console.log(item)
           return <th key={key} scope="col">{item}</th>
        })
        headers = headers.concat(head);
    })
  }
  return headers;
}
 

И в вашем jsx используйте это

 <tr>
   {getHeaders(fileList)}
</tr>