Asked May 18th, 11:56 a.m. 207 0 1
  • 207 0 1
+1

Hỏi lỗi khi lập trình web bằng reactjs + laravel

Share
  • 207 0 1

Mọi người giúp em sửa lỗi này với ạ:

Em gặp lỗi này khi cố lấy id của người dùng từ url(http://localhost:3000/edit/1).Đây là lệnh lấy id của em:

Đây là phần link đến trang edit của em. Do ko dùng đc 'edit/${item.id}' nên em nối xâu ạ:

image.png

Đây là file app.js của em:

image.png

Hiện tại em đang sử dụng laravel và react bản mới nhất.Đây là file package.json của react:

image.png

1 ANSWERS


Answered May 18th, 4:11 p.m.
Accepted
+1

Lỗi của bạn liên quan đến thư viện react-router-dom. Cách lấy param id từ route /edit chính xác là phải sử dụng hook useParams của react-router. Ở đây mình thấy component của bạn đang tạo dạng class component, bạn nên chuyển nó sang dạng functional component thì mới có thể sử dụng được hook (nguồn), sau đó bạn có thể dùng như sau:

import { useParams } from "react-router-dom"

export default function EditRestaurants() {
  const { id } = useParams();
  console.log(id);
}

Còn để dùng được template literal thì bạn dùng dấu backtick nhé:

<Link to={`/edit/${item.id}`} className="btn">Edit</Link>
Share
Avatar Phạm Hiếu @0695504095
May 19th, 4:00 a.m.

Em sửa thành dấu backtick rồi ạ nhưng vẫn không dùng được tamplate literal.Nó bị lỗi như này ạ:

image.png

0
| Reply
Share
Avatar Khang @khangnd
May 19th, 5:35 a.m.

Bạn chụp, share lại những đoạn code đã được sửa để mình dễ tham khảo nhé.

0
| Reply
Share
Avatar Phạm Hiếu @0695504095
May 19th, 8:21 a.m.

@khangnd

image.png

Em sửa mỗi thẻ <Link></Link> thôi ạ.

0
| Reply
Share
Avatar Khang @khangnd
May 19th, 10:21 a.m.

À, bạn xem lại câu trả lời của mình nhé, lỗi nằm ở cách bạn lấy param id chứ ko phải do template literal hay nối chuỗi.

0
| Reply
Share
Avatar Phạm Hiếu @0695504095
May 20th, 2:37 p.m.

@khangnd Em đã lấy id được rồi ạ.Cảm ơn anh đã giúp em ạ.

+1
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.