通过数组的当前索引提交包含数组数据的表单

Question

我在列表中有一个表格，我通过 function 提交

列表中的每个项目都有一个 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>
    ))}

我提交表格的 function ：

 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;

Answer 1

问题是您为每个表单提供相同的 id。 您需要提供不同的 id，例如<form id=`liked-${post.postId}` name="liked">

Answer 2

您可以将循环数据移动到单独的文件中。 它将给出提交表单数据而不是最后的数据。 请参阅以下具有类似情况的链接。

https://codesandbox.io/embed/heuristic-cookies-r9vfy?fontsize=14&hidenavigation=1&theme=dark