#javascript #reactjs #redux
Вопрос:
Я пытаюсь отобразить данные, которые я получаю из своего api с помощью Redux, и сопоставить их для отображения в таблице. Однако у меня этот объект ошибки не является функцией, и мне трудно найти причину проблемы. Мне удалось получить данные на карточке, но по какой-то причине, когда я пытаюсь сделать это на столе, я не могу понять
вот мое досье :
export default function ProductTable({product}) {
const { products } = useSelector(state => state.products);
const dispatch = useDispatch();
return (
<div>
<body>
<div className="container-xl">
<div className="table-responsive">
<div className="table-wrapper">
<div className="table-title">
<div className="row">
<div class="col-sm-6">
<h2>
Gérer <b>Produits</b>
</h2>
</div>
<div className="col-sm-6">
<Link
data-target="#editEmployeeModal"
className="btn btn-secondary"
data-toggle="modal"
>
<i class="fas fa-plus-circle" />{" "}
<span>Ajouter un Produit</span>
</Link>
<Link
data-target="#addEmployeeModal"
className="btn btn-secondary"
data-toggle="modal"
>
<i class="fas fa-plus-circle" />
<span>Ajouter une Catégorie</span>
</Link>
</div>
</div>
</div>
<table className="table table-striped table-hover">
<thead>
<tr>
<th>
<span className="custom-checkbox">
<input type="checkbox" id="selectAll" />
<label for="selectAll" />
</span>
</th>
<th>Image</th>
<th>Video</th>
<th>Titre</th>
<th>Marques</th>
<th>Année</th>
<th>Statut</th>
<th>Action</th>
</tr>
</thead>
{products amp;amp;
products.map(product => (
<tbody key={product._id} product={product}>
<tr>
<td>
<span className="custom-checkbox">
<input
type="checkbox"
id="checkbox1"
name="options[]"
value="1"
/>
<label for="checkbox1" />
</span>
</td>
<td></td>
<td>https://youtube.com</td>
<td></td>
<td>BMW</td>
<td> {product.productName}</td>
<td>Disponible</td>
<td>
<Link
data-target="#editEmployeeModal"
className="edit"
data-toggle="modal"
>
<i class="fas fa-pen" />
</Link>
<Link
data-target="#deleteEmployeeModal"
className="delete"
data-toggle="modal"
onClick={() => dispatch(deleteProduct(product._id))}
>
<i class="fas fa-trash" />
</Link>
</td>
</tr>
</tbody>
))}
</table>
<div className="clearfix">
<div className="hint-text">
Showing <b>5</b> out of <b>25</b> entries
</div>
<ul className="pagination">
<li className="page-item disabled">
<Link to="#">Previous</Link>
</li>
<li className="page-item">
<Link to="#" className="page-link">
1
</Link>
</li>
<li className="page-item">
<Link to="#" className="page-link">
2
</Link>
</li>
<li className="page-item active">
<Link to="#" className="page-link">
3
</Link>
</li>
<li className="page-item">
<Link to="#" className="page-link">
4
</Link>
</li>
<li className="page-item">
<Link to="#" className="page-link">
5
</Link>
</li>
<li className="page-item">
<Link to="#" className="page-link">
Next
</Link>
</li>
</ul>
</div>
</div>
</div>
</div>
<AdminCategoryModal />
<AdminProductModal />
<div id="editEmployeeModal" className="modal fade">
<div className="modal-dialog">
<div className="modal-content">
<form>
<div className="modal-header">
<h4 className="modal-title">Modification Produit</h4>
<button
type="button"
className="close"
data-dismiss="modal"
aria-hidden="true"
>
amp;times;
</button>
</div>
<div className="modal-body">
<div className="form-group">
<label>Image</label>
<input type="text" className="form-control" required />
</div>
<div className="form-group">
<label>Video</label>
<input type="email" className="form-control" required />
</div>
<div className="form-group">
<label>Titre</label>
<textarea className="form-control" required />
</div>
<div className="form-group">
<label>marque</label>
<input type="text" className="form-control" required />
</div>
<div className="form-group">
<label>année</label>
<input type="text" className="form-control" required />
</div>
<div className="form-group">
<label>description</label>
<input type="text" className="form-control" required />
</div>
<div className="form-group">
<label>catégorie</label>
<input type="text" className="form-control" required />
</div>
<div className="form-group">
<label>status</label>
<input type="text" className="form-control" required />
</div>
</div>
<div className="modal-footer">
<input
type="button"
className="btn btn-default"
data-dismiss="modal"
value="Cancel"
/>
<input type="submit" className="btn btn-info" value="Save" />
</div>
</form>
</div>
</div>
</div>
<div id="deleteEmployeeModal" className="modal fade">
<div className="modal-dialog">
<div className="modal-content">
<form>
<div className="modal-header">
<h4 className="modal-title">Suppression produit</h4>
<button
type="button"
className="close"
data-dismiss="modal"
aria-hidden="true"
>
amp;times;
</button>
</div>
<div className="modal-body">
<p>Etes-vous certain de vouloir supprimer ce produit ?</p>
<p className="text-warning">
<small>Vous ne pourrez pas faire marche arrière.</small>
</p>
</div>
<div className="modal-footer">
<input
type="button"
className="btn btn-default"
data-dismiss="modal"
value="Cancel"
/>
<input
type="submit"
className="btn btn-danger"
value="Delete"
/>
</div>
</form>
</div>
</div>
</div>
</body>
</div>
);
}