Actualmente estoy trabajando en CS50 Web Project 4 - Network. La tarea es diseñar una red similar a Twitter. Actualmente, estoy atascado en la función Me gusta.
Tengo un botón de me gusta y un contador de me gusta. Cuando hago clic en el botón Me gusta, el contador en la página dice "indefinido". Pero cuando vuelvo a cargar la página, todo está bien y el conteo de Me gusta muestra el número correcto de Me gusta y también el botón Me gusta ha cambiado a un botón Me gusta. ¿Alguien tiene una idea de cuáles son los problemas? Estoy atascado desde hace días y no puedo resolverlo. Cualquier ayuda es muy apreciada.
Aquí está mi código:
vistas.py
@csrf_exempt def like(request, post_id): post = Post.objects.get(id=post_id) if request.method == "GET": return HttpResponseRedirect(reverse("index")) if request.method == "PUT": data = json.loads(request.body) if data.get("like"): Likes.objects.create(user=request.user, post=post) post.likes = Likes.objects.filter(post=post).count() else: Likes.objects.filter(user=request.user, post=post).delete() post.likes = Likes.objects.filter(post=post).count() post.save() return HttpResponse("done")java.js
function like(id) { fetch(`/like/${id}`, { method: 'PUT', body: JSON.stringify({ like: true }) }) .then(post => { document.querySelector(`#like_count${id}`).innerHTML = post.likes; }); } function unlike(id) { fetch(`/like/${id}`, { method: 'PUT', body: JSON.stringify({ like: false }) }) .then(post => { document.querySelector(`#like_count${id}`).innerHTML = post.likes; }); }y en mi html:
<div id="like_count{{post.id}}">Likes: {{ post.likes }}</div> {% if liked %} <button class="btn btn-outline-danger" id="unlike_button{{post.id}}" onclick="unlike('{{ post.id }}')">Unlike</button> {% else %} <button class="btn btn-outline-primary" id="like_button{{post.id}}" onclick="like('{{ post.id }}')">Like</button> {% endif %}"done" , no un objeto que tendría un atributo de Me likes .return JSONResponse({"likes": post.likes}) en su lugar.fetch() es una respuesta. (Está intentando acceder a los Me likes ). Deberá esperar en res.json() para decodificar una respuesta JSON en un objeto. (Mientras lo hacemos, podemos eliminar un poco de repetición en el código). function likeOrUnlike(id, like) { fetch(`/like/${id}`, { method: "PUT", body: JSON.stringify({ like: !!like }), }) .then((resp) => resp.json()) .then((post) => { document.querySelector(`#like_count${id}`).innerHTML = post.likes; }); } function like(id) { likeOrUnlike(id, true); } function unlike(id) { likeOrUnlike(id, false); }