Блог

Главная - Вопросы по программированию - Почему я не могу установить свой конструктор внутри функции?

Почему я не могу установить свой конструктор внутри функции?

#reactjs #constructor #state

Вопрос:

Я хочу установить конструктор для определения значения продукта по умолчанию, но, похоже, он не работает. Я не знаю, в чем проблема, кто-нибудь знает, пожалуйста, помогите мне! Большое вам спасибо!

Products.js:

 import React from "react";
import Modal from 'react-modal';

function Products(props) {
 var data = Array.from(props.products);
constructor(){
  super(props)
  this.state={
    product:null
  }
}
  return (
    <div>
      <ul className="products">
        {data.map((product) => {
          return (
            <li key={product._id}>
              <div className="product">
                <a>
                  <img src={product.image} alt={product.title} />
                  <p>{product.title}</p>
                </a>
                <div className="product-price">
                  <div>{product.price}</div>
                  <button onClick={() => props.addToCart(product)} className="button primary">Add to Cart</button>
                </div>
              </div>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

export default Products;

ссылка на песочницу для более четкого наблюдения: https://codesandbox.io/s/redux-shop-cart-forked-19huj?file=/src/components/Products.js

Комментарии:

1. Вы пытаетесь создать компонент класса или функциональный компонент? Вы, кажется, совмещаете и то, и другое, чего вы не можете сделать.

2. Пожалуйста, используйте компонент класса или используйте крючки для управления вашим состоянием, например useState . Ознакомьтесь с документами react, которые очень понятны и охватывают все это.

Ответ №1:

Вы используете React functional component и functional component не поддерживаете constructor , вам нужно использовать useState для загрузки props.products , но вы также можете использовать useEffect вместо constructor того, чтобы выполнять начальный вызов api или какую-либо операцию.

 const [data, setData] = useState(props.products);

useEffect(()=>{

  // here initial your data with default value

}, [])

Подробнее о useEffect

Здесь я обновляю ваш код в Codesandbox

Комментарии:

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

2. @Pandaiolo да, вы правы. на самом деле я объяснял useEffect в замене constructor , но для использования useState для загрузки начального значения. кстати, я обновил свой ответ

Метки: