Блог

Главная - Вопросы по программированию - Невозможно отобразить элемент компонента react

Невозможно отобразить элемент компонента react

#javascript #json #reactjs #button

#javascript #json #reactjs #кнопка

Вопрос:

введите описание изображения здесьЯ работаю над приложением для магазина футболок. В котором есть административные элементы управления всеми категориями продуктов и всеми продуктами. Я создал компонент ManageProducts, который обрабатывает обновление и удаление продуктов администратором. Когда я визуализирую его без какой-либо функции, он работает правильно и отображает все кнопки. Но когда я добавляю в него функцию сопоставления, она не отображает кнопки и сведения о продуктах. Также в консоли нет никаких ошибок..

Когда я console.log (typeof products), он показывает объект. в этом объекте ничего нет введите описание изображения здесь

вот код

 import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { isAutheticated } from "../auth/helper";
import Base from "../core/Base";
import { deleteProduct, getProducts } from "./helper/adminapicall";

const ManageProducts = () => {
  const [products, setProducts] = useState({});

  const { user, token } = isAutheticated;

  const preload = () => {
    getProducts().then((data) => {
      if (data.error) {
        console.log(data.error);
      } else {
        setProducts(data.products);
      }
    });
  };

  useEffect(() => {
    preload();
  }, []);

  const deleteThisProduct = (productId) => {
    deleteProduct(productId, user._id, token).then((data) => {
      if (data.error) {
        console.log(data.error);
      } else {
        preload();
      }
    });
  };

  return (
    <Base title="Welcome admin" description="Manage products here">
      <h2 className="mb-4">All products:</h2>
      <Link className="btn btn-info" to={`/admin/dashboard`}>
        <span className="">Admin Home</span>
      </Link>
      <div className="row">
        <div className="col-12">
          <h2 className="text-center text-white my-3">Total 3 products</h2>

          **{products amp;amp; products.length > 0 ? (
            products amp;amp;
            products.map((product, index) => {
              console.log(product);**
              return (
                <div key={index} className="row text-center mb-2 ">
                  <div className="col-4">
                    <h3 className="text-white text-left">{product.name}</h3>
                  </div>
                  <div className="col-4">
                    <Link
                      className="btn btn-success"
                      to={`/admin/product/update/${product._id}`}
                    >
                      <span className="">Update</span>
                    </Link>
                  </div>
                  <div className="col-4">
                    <button
                      onClick={() => {
                        deleteThisProduct(product._id);
                      }}
                      className="btn btn-danger"
                    >
                      Delete
                    </button>
                  </div>
                </div>
              );
            })
          ) : (
            <h1>No products found</h1>
          )}
        </div>
      </div>
    </Base>
  );
};

export default ManageProducts;

Часть кода, в которую я вставляю ** это код, когда я пишу, что кнопки не отображаются

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

1. Можете ли вы создать jsfiddle?

2. Я не могу этого сделать, вместо этого я вставил скриншот

3. jsfiddle.net/boilerplate/react-jsx добавьте свой код, сохраните его и поделитесь ссылкой здесь. Так будет проще проверить код.

4. Вот ссылка на совместное использование кода codeshare.io/5eEzeK