Erro Cannot read property React

Programação
#1

Olá pessoal,
Estou com um problema, e gostaria da ajuda de vocês, se possível.
Estou desenvolvendo uma loja online com ReactJS, e estava adaptando o tutorial do SimpleTut no Youtube. Mas me deparei com um erro persistente, que não consigo achar uma solução. Segue ele ai:

> TypeError: Cannot read property 'products' of undefined

mapState

C:/Users/Issidios/SiteMagalhaes/src/admin/cadastro/produtos/AdminNovoCadastroProdutos.js:20

17 | const AdminNovoCadastroProdutos = props => {
18 |
19 | const mapState = ({ productsData }) => ({>
20 | products: productsData.products
21 | });
22 | const { products } = useSelector(mapState);
23 | const dispatch = useDispatch();

Eu não sei ponde pode estar o problema, mas vou deixar o código inteiro da pagina com problema para ver se vocês podem me ajudar.

import React, { useEffect, useState } from 'react';

import { Link } from 'react-router-dom';

import { useDispatch, useSelector } from 'react-redux';

import { addProductStart, fetchProductsStart, deleteProductStart } from './../../../store/reducers/Produtos/products.actions';

import FormInput from './../../../loja/componentes/forms/FormInput';

import FormSelect from './../../../loja/componentes/forms/FormSelect';

import { Carousel } from 'react-responsive-carousel';

import "react-responsive-carousel/lib/styles/carousel.min.css";

import userIMG from './../../../loja/assets/user.png';

import CKEditor from 'ckeditor4-react';

const mapState = ({ productsData }) => ({

  product: productsData.products.product

});

const AdminNovoCadastroProdutos = props => {

  const { product } = useSelector(mapState);

  const dispatch = useDispatch();

  const [productType, setProductType] = useState('solar');

  const [productName, setProductName] = useState('');

  const [productThumbnail, setProductThumbnail] = useState('');

  const [productPrice, setProductPrice] = useState(0);

  const [productQuantidade, setProductQuantidade] = useState(0);

  const [productVoltagem, setProductVoltagem] = useState(0);

  const [productDesc, setProductDesc] = useState('');

  const { data, queryDoc, isLastPage } = product;

  useEffect(() => {

    dispatch(

      fetchProductsStart()

    );

  }, []);

  const resetForm = () => {

    setProductType('mens');

    setProductName('');

    setProductThumbnail('');

    setProductPrice(0);

    setProductDesc('');

    setProductQuantidade(0);

    setProductVoltagem(0)

  };

  const handleSubmit = e => {

    e.preventDefault();

    dispatch(

      addProductStart({

        productType,

        productName,

        productThumbnail,

        productPrice,

        productDesc,

        productQuantidade,

        productVoltagem,

      })

    );

    resetForm();

  };

  const handleLoadMore = () => {

    dispatch(

      fetchProductsStart({

        startAfterDoc: queryDoc,

        persistProducts: data

      })

    );

  };

  const configLoadMore = {

    onLoadMoreEvt: handleLoadMore,

  };

  return (

    <div className='bg-grey'>

      <div className='container '>

        <h2>Novo Produto</h2>

        <form onSubmit={handleSubmit}>

          <div className='col-sm-6'>

            <Carousel>

              <div>

                <img src={userIMG} />

                <p className="legend">Legend 1</p>

              </div>

              <div>

                <img src={userIMG} />

                <p className="legend">Legend 2</p>

              </div>

              <div>

                <img src={userIMG} />

                <p className="legend">Legend 3</p>

              </div>

            </Carousel>

            <label htmlFor="imagemPortfolio">Imagem Portfólio</label>

            <input type="file" className="form-control-file" id="imagemPortfolio" />

          </div>

          <div className="col-sm-6">

            <FormInput

              label="Nome"

              type="text"

              handleChange={e => setProductName(e.target.value)}

            />

            <FormSelect

              label="Tipo"

              options={[{

                value: "solar",

                name: "Placa Solar"

              }, {

                value: "kit",

                name: "Kit Solar"

              }]}

              handleChange={e => setProductType(e.target.value)}

            />

            <CKEditor

              onChange={evt => setProductDesc(evt.editor.getData())}

            />

            <FormInput

              label="Preço"

              type="number"

              min="0.00"

              max="1000000.00"

              step="0.01"

              handleChange={e => setProductPrice(e.target.value)}

            />

            <FormInput

              label="Quantidade"

              type="number"

              min="0"

              max="1000000"

              handleChange={e => setProductQuantidade(e.target.value)}

            />

            <FormInput

              label="Voltagem Gerada"

              type="number"

              min="0.00"

              max="1000000.00"

              step="0.01"

              handleChange={e => setProductVoltagem(e.target.value)}

            />

          </div>

          <br />

          <button type="submit" className="btn btn-primary">Salvar</button>

          <Link to='/admin/portfolio'>

            <button className="btn btn-primary btn-cancelar">Cancelar</button>

          </Link>

        </form>

      </div>

      <br />

    </div>

  );

}

export default AdminNovoCadastroProdutos;

Desde já agradeço.

#2

provavelmente o seu mapState está retornando undefined… Faz assim:

const {product} = useSelector(mapState || []);
//Se o seu mapState não retornar nada (undefined)
//vai retornar um array vazio

Reproduzindo o seu erro:
image
image

Rodando a “solução” com Objeto:

image
image

Rodando a “solução” com Array:

image
image

#3

Opa Abner, obrigado pela por responder.
Então, fiz o que você passou, e ainda não deu certo, to achando que ele nem chega nessa linha da sua solução. Já que eu crio o const mapState antes do cont principal. O erro de undefined acontece nessa linha (que aproposito fiz uma alteração), product: productsData.product.
Esse product que ele está pedindo para definir, mas eu nem imagino como, no tutorial que eu tava seguindo nem teve esse problema.

#4

Vc ta recuperando esses dados de onde? Banco de dados?

#5

Por enquanto de nenhum lugar, mas a ideia é buscar pelo Firebase quando eu for editar um produto, tentei usar a mesma tela para isso e um cadastro novo, mas pelo visto não tá dando muito certo.

#6

Então, esse array vai sempre retornar undefined se você não alimentar ele… Caso vc queira saber como está ficando pode usar um “fake json”, exemplo