Перебор ассоциативного массива в ReactJS

Question

Данный пример моего кода работает, но мне нужно получить не конкретный элемент массива, а все его элементы. Судя по всему необходимо использовать foreach внутри функции map, но у меня почему то так не работает. Также прилагаю структуру массива. Помогите пожалуйста отрендерить все элементы массива products

    import React, { Component } from 'react';
    /* import { Link } from 'react-router'; */
    
    import Strapi from 'strapi-sdk-javascript/build/main';
    
    const strapi = new Strapi('http://localhost:1337');
    //const BLOG_URL = 'http://localhost:1337';
    
    
    class Faq extends Component {
       
      constructor(props) {
            super(props);
            this.state = {
             posts: []
           }
         }
        
        async componentDidMount() {
         try {
           const posts = await strapi.getEntries('categories?id=7')
           this.setState({ posts });
         } 
         catch(err) {
          alert(err);
         }
        }
        
         render() { 
            const productItem = this.state.posts.map((item, index) => {
            return  <section className="b-productsContainer">
                        <span className="b-productItem" key={index}> 
                            {/*  <img className="news-preview-img" src={BLOG_URL + item.products[0].img.url} alt="" />  */}
                            <p>{item.products[0].author}</p>
                            <h4>{item.products[0].title}</h4>               
                        </span>
                </section>
            })
    
          return (
              <>
              {productItem}
              </>
          )
        }
    
    }
    
    export default Faq

Answer 1

Вы уже используете метод map для генерации постов из props'ов, так что будет достаточно добавить еще один цикл:

const productItem = this.state.posts.map(item => (
    <section className="b-productsContainer" key={unique_key_1}>
        <span className="b-productItem">
        {item.products.map(product => (
            <React.Fragment key={unique_key_2}>
                <p>{product.author}</p>
                <h4>{product.title}</h4>
            </React.Fragment>
        ))}
         </span>
    </section>
   )
)

Отдельно хочу отметить что не стоит использовать index в качестве уникальных идентификаторов таких как key.

БЛОГ НА HUSL

Перебор ассоциативного массива в ReactJS

Ответы (1 шт):