我在串列中有一個表單，我通過函式提交
串列中的每個專案都有一個 postId 和一個 userId。
postId 和 userId 用于表單中的輸入欄位。
問題
問題是，無論我提交陣列中的哪個索引，它都會提交最后一個。例如，如果我嘗試提交 postId 6、7 和 10，它會提交：10、10、10
帶有表格的串列，映射出來：
{posts?.map((post) => (
<div>
<PostCard
className="swipe"
key={post.id}
preventSwipe={["down"]}
onSwipe={onSwipe}
onCardLeftScreen={() => onCardLeftScreen(post.id)}
>
<Modal
open={toggleModal}
handleClose={handleToggleModal}
loading={loading}
>
<h3>S?dan {user.name}</h3>
<p>
S?lger har modtaget dit bud! S? snart s?lger har
accepteret, tr?kker vi pengene fra din konto. N?r dit k?b
er sendt, sender vi pengene videre til s?lger!
</p>
</Modal>
<h4 className="distance">60 kilometer</h4>
<h4 className="price">{post?.price} kr.</h4>
{/* LINK TO ADVERSE */}
<Link className="post_title" to={`/showpost/${post.id}`}>
{post.title}
</Link>
{/* FORM TO SUBMIT!! */}
<form id="liked" name="liked">
{/* GET THESE */}
<input name="postId" id="postId" defaultValue={post.id} />
<input
name="userId"
id="userId"
defaultValue={currentUser?.id}
/>
<button hidden type="submit" className="btn btn-primary">
LIKE
</button>
</form>
</PostCard>
</div>
))}
我提交表單的功能：
const onSwipe = (direction) => {
if (direction == "right") {
// if swipe right = add to bookmarks list
context.postBookmark(document.getElementById("liked"));
};
組件的完整代碼：
import React, {
useContext,
useEffect,
useState,
useCallback,
useRef,
} from "react";
import Loader from "react-loader-spinner";
import PostCard from "react-tinder-card";
import { Link } from "react-router-dom";
// Style
import "../../../styles/PostCards.css";
import "../../../styles/SwipeButtons.css";
// Context
import DbContext from "../../../context/DbContext";
// Icons
import ReplayIcon from "@material-ui/icons/Replay";
import CloseIcon from "@material-ui/icons/Close";
import StarRateIcon from "@material-ui/icons/StarRate";
import FavoriteIcon from "@material-ui/icons/Favorite";
import FlashOnIcon from "@material-ui/icons/FlashOn";
import { IconButton } from "@material-ui/core";
import Modal from "../../layout/modal/Modal";
const PostCards = (props) => {
const [posts, setPosts] = useState([]);
const [user, setUser] = useState([]);
const context = useContext(DbContext);
const [loading, setLoading] = useState(false);
const [currentUser, setCurrentUser] = useState([]);
const [toggleModal, setToggleModal] = useState(false);
const handleToggleModal = useCallback(() => {
setUser(context.getUser());
setToggleModal(!toggleModal);
});
useEffect(() => {
// if (context.existsUser() == null) {
// window.location.href = "/login";
// }
context.getPosts().then((r) => setPosts(r));
}, [context]);
useEffect(() => {
setCurrentUser(context.getUser());
}, [context.existsUser()]);
const onSwipe = (direction) => {
if (direction == "right") {
// if swipe right = add to bookmarks list
context.postBookmark(document.getElementById("liked"));
console.log("Interesseret!!!");
}
if (direction == "up") {
setToggleModal(true);
console.log(
"Venter p? at s?lger acceptere, hvorefter betalingen vil blive overf?rt!!! :-)"
);
}
if (direction == "left") {
console.log("Moved to notinterested");
}
console.log("You swiped: " direction);
};
const onCardLeftScreen = (myIdentifier) => {
console.log(myIdentifier " left the screen");
};
return (
<>
<div>
{posts?.length > 0 ? (
<div className="postCards__cardContainer">
{posts?.map((post) => (
<div>
<PostCard
className="swipe"
key={post.id}
preventSwipe={["down"]}
onSwipe={onSwipe}
onCardLeftScreen={() => onCardLeftScreen(post.id)}
>
<Modal
open={toggleModal}
handleClose={handleToggleModal}
loading={loading}
>
<img
src="API DATA"
alt="Accept_offer_image"
/>
<h3>S?dan {user.name}</h3>
<p>
S?lger har modtaget dit bud! S? snart s?lger har
accepteret, tr?kker vi pengene fra din konto. N?r dit k?b
er sendt, sender vi pengene videre til s?lger!
</p>
</Modal>
<div
style={{
backgroundImage: `url(API DATA${post?.images[0]?.url})`,
}}
className="card"
>
<h4 className="distance">60 kilometer</h4>
<h4 className="price">{post?.price} kr.</h4>
{/* LINK TO ADVERSE */}
<Link className="post_title" to={`/showpost/${post.id}`}>
{post.title}
</Link>
</div>
{/* FORM TO SUBMIT!! */}
<form id="liked" name="liked" ref={submitTest}>
{/* GET THESE */}
<input name="postId" id="postId" defaultValue=
{post.id} />
<input
name="userId"
id="userId"
defaultValue={currentUser?.id}
/>
<button hidden type="submit" className="btn btn-primary">
LIKE
</button>
</form>
</PostCard>
</div>
))}
</div>
) : (
<Loader
className="loader"
type="MutatingDots"
color="#052131"
secondaryColor="#909090"
height={100}
width={100}
timeout={3000} //3 secs
/>
)}
</div>
<div className="swipeButtons">
<IconButton className="swipeButtons__repeat">
<ReplayIcon fontSize="large" />
</IconButton>
<IconButton className="swipeButtons__left">
<CloseIcon fontSize="large" />
</IconButton>
<IconButton className="swipeButtons__star">
<StarRateIcon fontSize="large" />
</IconButton>
<IconButton className="swipeButtons__right">
<FavoriteIcon fontSize="large" />
</IconButton>
<IconButton className="swipeButtons__lightning">
<FlashOnIcon fontSize="large" />
</IconButton>
</div>
</>
);
};
export default PostCards;
uj5u.com熱心網友回復：
問題是您為每個表單提供相同的 id。您需要提供不同的 ID，例如<form id=`liked-${post.postId}` name="liked">
uj5u.com熱心網友回復：
您可以將回圈資料移動到單獨的檔案中。它將給出提交表單資料而不是最后的資料。請參閱以下具有類似情況的鏈接。
https://codesandbox.io/embed/heuristic-cookies-r9vfy?fontsize=14&hidenavigation=1&theme=dark
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/405730.html
標籤：