Почему я получаю "Not Found: /api/products/undefined" вместо /api/products/1?
Я хочу получить данные одного продукта из "api/products/id" (я использую Django Rest Framework) и поместить их в redux store, чтобы при обновлении страницы продукта данные действительно отображались
.
Проблема в том, что когда я захожу на "localhost:3000/products/1" (я использую также React), вместо того, чтобы получить продукт с id = 1, я получаю неопределенный продукт и вообще никаких данных. Более глубокое место, где id не определен, я нашел в views.py
Почему возникает эта проблема? Это как-то связано с миграцией? Я удалил *.pyc + *.py файлы, кроме init, а затем снова запустил makemigrations и migrate, но ничего не изменилось
И как я могу решить эту проблему?
views.py
@api_view(['GET'])
def getProduct(request, pk):
print("\n\n\nPlural key: ", pk) # The pk is undefined
product = Product.objects.get(id=pk) # So the product also is undefined
serializer = ProductSerializer(product, many=False)
return Response(serializer.data)
serializer.py
class ProductSerializer(serializers.ModelSerializer):
class Meta:
model = Product
fields = '__all__'
models.py
from django.contrib.auth.models import User
class Product(models.Model):
# ID is generating automatically
user = models.ForeignKey(User, on_delete=models.SET_NULL, null=True)
name = models.CharField(max_length=200, null=True, blank=True)
image = models.ImageField(null=True, blank=True,
default='/placeholder.png')
brand = models.CharField(max_length=200, null=True, blank=True)
category = models.CharField(max_length=200, null=True, blank=True)
description = models.TextField(null=True, blank=True)
rating = models.DecimalField(
max_digits=7, decimal_places=2, null=True, blank=True)
numReviews = models.IntegerField(null=True, blank=True, default=0)
price = models.DecimalField(
max_digits=7, decimal_places=2, null=True, blank=True)
countInStock = models.IntegerField(null=True, blank=True, default=0)
createdAt = models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.name
urls.py
urlpatterns = [
path('', views.getRoutes, name='routes'),
path('products/', views.getProducts, name='products'),
path('products/<int:pk>', views.getProduct, name='product'),
]
Изначально было <str:pk>
, но оно выбрасывало ValueError, поэтому изменили на <int:pk>
.
Я думаю, что проблема в react. Пожалуйста, убедитесь, что URL API запроса правильный. В коде на стороне бэкенда проблем нет.
Ваш код Back-end кажется нормальным.
Я полагаю, что происходит то, что ваш front-end (функция fetchSingleProduct
) не получает идентификатор товара, который ему нужен.
Обновление от ОП.
Причина, по которой она не получает id товара, заключается в том, что в useEffect
"productId" передается в качестве аргумента стрелочной функции. Но поскольку эта функция никогда не вызывается за пределами своего объявления, стрелочная функция не получает никакого id, поэтому вместо него получает "undefined".
Чтобы решить эту проблему, пожалуйста, удалите аргумент "productId" из функции arrow. После этого код будет работать, но появится предупреждение:
У реакт-хука useEffect отсутствует зависимость: 'productId'. Либо включите ее, либо удалите зависимость из массива react-hooks/exhaustive-deps
.
Чтобы получить его, просто передайте "productId" в массив, который является вторым аргументом useEffect
.
Для подробностей проверьте: У хука useEffect отсутствуют зависимости. Либо включите их, либо удалите массив зависимостей react-hooks/exhaustive-deps
Код useEffect
после изменений будет выглядеть следующим образом:
useEffect(() => {
// If client doesn't have any data from server...
if(status === 'idle') {
// ...fetch for this data
dispatch(fetchSingleProduct(productId))
}
}, [status, dispatch, productId])