Konwersja funkcji na klasy ReactJS

Question

Próbowałem przekonwertować funkcję na klasę. Popełniłem błąd z mapą, ale nie pokazuje żadnego błędu i nie pokazuje kart produktów na stronie. Czy mógłbyś mi pomóc, zazwyczaj używam funkcji i nie wiem jak powinna wyglądać? Prosiłbym o pomoc, nie za bardzo rozumiem jak to zrobić

Answer 1

Zakładam że products powinno być tablicą a jest tam obiekt. Nie używałem komponentów klasowych kilka lat ale kiedyś ustawiało się this.state o initialState nie słyszałem.

Jednak po co chcesz to przerabiać? Skoro używałeś reduxa to w przypadku komponentów musisz użyć funkcji connect która dany state wyśle do propsów.

Comments

Wymóg zadanie. Zacząłem korzystać z connect i props gist.github.com/sicArchitect/e5c82a500e6f1878267e2dced53a6ce0

---

@rafal.budzis, A co jeśli zamiast Redux wykorzystać json? Ogólnie zależy mi na pobieraniu danych. W przypadku funkcji Redux sprawdzał się bardzo dobrze i łatwo.
https://gist.github.com/sicArchitect/e5c82a500e6f1878267e2dced53a6ce0
Zamieniłem kod, ale tutaj też nie renderuje

Answer 2

Prawidłowa konwersja:
 

import React from 'react';
import ProductBox from '../../features/ProductBox/ProductBox';
import styles from './Products.module.scss';
import db from '../../../db.json'

const productData = db.products;

class Products extends React.Component {
  render(){
    return (
      <div className={styles.root}>
        <div className={styles.category_name}>
          <h1>Category name</h1>
        </div>
        <div className={styles.box}>
          {productData?.map((product, index) => (
            <div className={styles.card} key={index}>
              <ProductBox {...product} />
            </div>
          ))}
        </div>
      </div>
    );
  }
};
export default Products;