如何将购物页面中的商品清单和商品与 React 链接

Question

我正在用React制作购物页面。

当我点击商品图片时，我想进入详细页面。

我试图通过<链接className 到="{/goods/${id}}">GoodsList代码中的此代码获得点击给我的商品id。

然后，在GoodsDetail代码中，我试图获得点击到我的商品的id并呈现商品的数据

但是在GoodsList代码中似乎不能很好地工作。

当我点击商品图片时，页面不是转到商品/{id}，而是转到商品/undefined

我如何修复我的代码?

这是App.js代码

import React from 'react';
import './App.css';
import Navbar from './components/Navbar';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages';
import Sell from './pages/sell';
import Search from './pages/search';
import AboutMe from './pages/aboutme';
import Login from './pages/login';
import TradeRecord from './pages/traderecord';
import SignUp from './pages/signup';
import Zzim from './pages/zzim';
import Selling from './pages/selling';
import Goods from './pages/goods';

const App = () => {

return (
<div className='App'>
<BrowserRouter>
<Navbar />
<Routes>
<Route path="/" element={<Home />}></Route>
<Route path="/sell" element={<Sell />}></Route>
<Route path="/search" element={<Search />}></Route>
<Route path="/signup" element={<SignUp />}></Route>
<Route path="/login" element={<Login />}></Route>
<Route path="/aboutme" element={<AboutMe />}></Route>
<Route path="/selling" element={<Selling />}></Route>
<Route path="/zzim" element={<Zzim />}></Route>
<Route path="/traderecord" element={<TradeRecord />}></Route>
<Route path="/goods/:id" element={<Goods />}></Route>
</Routes>
</BrowserRouter>
</div>
)
}
export default App;

这是商品清单页面代码

import React, {useState, useEffect} from 'react';
import { Link, useParams } from 'react-router-dom';
import axios from 'axios';
import './index.css';
const SearchView  = (props) => {
const [boards, setBoards] = useState([]);
const {id} = useParams();

useEffect(() => {
(async function () {
const response = await axios.get("https://27.96.131.85:8443/api/boards")
.catch((err) => {
console.log(err);
});
const boards = response.data;

setBoards(boards);
console.log(response.data);
})();
}, []);
return(
<div>
<hr />
<div id='product-list'>
{
boards.map(function(boards, index){
return (
<div className='product-card'>
<Link className='product-link' to={`/goods/${id}`}>
<div>
{
boards.boardImages[0]
? <img className="product-img" width="100" height="100"
src={`https://27.96.131.85:8443/api/images/${boards?.boardImages[0]?.id}`} />
: <img className="product-img" width="100" height="100" src={require("../../images/noImage.png")} />  
}                                 
</div>
<div className='product-contents'>
<span className='product-name'>
{boards.goodsName}
</span>
<span className='product-price'>
{boards.price}원
</span>
<div className='product-seller'>
<span>{boards.writer}</span>
</div>
</div>
</Link>
</div>
)
})
}
</div>
</div>
);
};
export default SearchView;

这是货物明细代码

import { useParams } from "react-router-dom";
import axios from "axios";
import { useEffect, useState } from "react";
const Goods  = (props) => {
const [boards, setBoards] = useState({});
const [images, setImages] = useState([]);
const {id}  = useParams();
useEffect(() => {
(async function () {
const response = await axios.get(`https://27.96.131.85:8443/api/boards/${id}`, {
withCredentials: true,
});
const boards = response.data;
const images = boards.boardImages;
console.log(response.data);
setBoards(boards);
setImages(images);
})();
}, []);
return(
<div id="product">
상품명: <span className="product-name">{boards.goodsName}</span>
<br />
가격: <span className="product-price">{boards.price}원</span>
<div className="product-seller">
작성자: <span>{boards.writer}</span>
</div>
<div className="product-isSale">
판매여부: <span>{boards.sale?.toString()}</span>
</div>
<div className="product-isLiked">
찜 여부: <span>{boards.liked?.toString()}</span>
</div>
<div className="product-atCreated">
작성 시간: <span>{boards.createdDateTime}</span>
</div>
<div className="product-atModified">
수정 시간: <span>{boards.modifiedDateTime}</span>
</div>
<div className="product-images">
{
images.map((image) => {
return (
<img className="product-img" width="100" height="100"
src={`https://27.96.131.85:8443/api/images/${id}`} />
)
})
}
</div>
</div>
);
};
export default Goods;

Answer 1

你方商品清单页面代码有误，

解决方案:

{boards.map(function (boards, index) {
return (
<div className="product-card">
<Link className="product-link" to={`/goods/${boards.id}`}>
<div>
{boards.boardImages[0] ? (
<img
className="product-img"
width="100"
height="100"
src={`https://27.96.131.85:8443/api/images/${boards?.boardImages[0]?.id}`}
/>
) : (
<img
className="product-img"
width="100"
height="100"
src={require("../../images/noImage.png")}
/>
)}
</div>
<div className="product-contents">
<span className="product-name">{boards.goodsName}</span>
<span className="product-price">{boards.price}원</span>
<div className="product-seller">
<span>{boards.writer}</span>
</div>
</div>
</Link>
</div>
);
})}

，因为您使用map函数遍历board数组，你已经为数组的每个元素分配了变量名'boards'因此，变量boards本身是一个包含id属性的对象。

所以你必须写boards.id来解决你的问题

我希望这对你有帮助

Answer 2

我认为应该是板。Id，而不是Id ..

<Link className='product-link' to={`/goods/${id}`}>

你能分享一下你的数据结构吗?