Yêu cầu thg 5 18, 2022 11:56 SA 220 0 1
  • 220 0 1
+1

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

Chia sẻ
  • 220 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 CÂU TRẢ LỜI


Đã trả lời thg 5 18, 2022 4:11 CH
Đã được chấp nhận
+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>
Chia sẻ
Avatar Phạm Hiếu @0695504095
thg 5 19, 2022 4:00 SA

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

Avatar Khang @khangnd
thg 5 19, 2022 5:35 SA

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

Avatar Phạm Hiếu @0695504095
thg 5 19, 2022 8:21 SA

@khangnd

image.png

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

Avatar Khang @khangnd
thg 5 19, 2022 10:21 SA

À, 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.

Avatar Phạm Hiếu @0695504095
thg 5 20, 2022 2:37 CH

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

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí