为什么我的代码不一致地使用onDoubleClick发送服务器数据？

Question

我不知道为什么第一对onDoubleClick会触发500服务器错误，但是在所有后续的onDoubleClick中，它正确地触发200，但下面描述的行为不一致。

为了举例说明，正在发生的事情如下：

1. 双击图像A以获得用户ID 1 -> 500错误
2. 双击图像A以获得用户ID 1 -> 200的成功(用户ID 1成功更新)
3. 双击图像B以获得用户ID 2 -> 200的成功(当用户ID 2应该更新时，成功地更新用户ID 1 )
4. 等等..。

我已经检查过了，甚至尝试过关于这个主题最流行的问题的所有建议，但是都没有结果。我撞到砖墙了。

我相信这与钩子的异步特性以及我如何定义它们有关，但我不完全确定。

如何才能使其在双击任何图像时，相应的数据在第一对双击以及随后的任何双击(即不同的图像)上被正确地发送到服务器？

为了举例说明，我希望它的表现如下：

1. 双击图像A以获得用户ID 1 -> 200的成功(用户ID 1成功更新)
2. 双击*在图像b上获得用户ID 2 -> 200的成功(用户ID 2成功更新)
3. 等等..。

const Images = () => {
  let authToken = localStorage.getItem("token");

  const [uploadsData, setUploadsData] = useState([]);
  const [likedPhotoUserId, setLikedPhotoUsedId] = useState("");
  const [like, setLike] = useState(0);

  useEffect(() => {
    getUploads();
  }, []);

  useEffect(() => {}, [uploadsData]);

  const getUploads = () => {
    const headers = {
      Accept: "application/json",
      Authorization: `Bearer ${authToken}`,
    };

    axios
      .get("http://localhost:8005/api/get-user-uploads-data", { headers })
      .then((resp) => {
        console.log(resp.data);
        setUploadsData(resp.data);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const handleLikesBasedOnUserId = (e) => {
    setLikedPhotoUsedId(e);
    sendUserLikePost();
  };

  const sendUserLikePost = () => {
    const url = "http://localhost:8005/api/post-user-like";

    const headers = {
      Accept: "application/json",
      Authorization: `Bearer ${authToken}`,
    };

    let data = {
      like: like,
      UserID: likedPhotoUserId,
    };

    console.log(data);

    axios
      .post(url, data, { headers })
      .then((resp) => {
        console.log(resp.data);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const displayUploadsData = () => {
    return uploadsData.map((photos, index) => {
      return (
        <ImagesGrid
          src={photos.url}
          likes={photos.likes}
          userName={photos.name}
          key={index}
          doubleClick={handleLikesBasedOnUserId}
          value={photos.UserID}
        />
      );
    });
  };

  return <>{displayUploadsData()}</>;
};

const ImagesGrid = (props) => {
  const createUserPhotoNodes = () => {
    return (
      <section className="gallery">
        <div className="container">
          <form method="POST" name="likes">
            <div className="img-container">
              <img
                src={props.src}
                alt="Photo"
                className="gallery-img"
                onDoubleClick={() => props.doubleClick(props.value)}
              />
              <h2 className="userName">{props.userName}</h2>
              <h2 className="likes" onChange={props.onChange}>
                Likes {props.likes}
              </h2>
            </div>
          </form>
        </div>
      </section>
    );
  };

  return <>{createUserPhotoNodes()}</>;
};

Answer 1

这是因为setState是异步的，而你看到的是陈腐的道具或状态是要引导的。

使用

const handleLikesBasedOnUserId = (e) => {
    setLikedPhotoUsedId(e);
    sendUserLikePost();
};

const sendUserLikePost = () => {
    // ...
    let data = {
        'like': like,
        'UserID': likedPhotoUserId
    };
    // ...

likedPhotoUserId在调用sendUserLikePost之前不会更新，因此likedPhotoUserId是''。(当您再次调用handleLikes...时，它将具有“先前”值。)

我看不出为什么likedPhotoUserId应该是一个状态原子，因为您使用它的全部是sendUserLikePost --只需将它作为一个常规的ol‘参数：

const handleLikesBasedOnUserId = (e) => {
    sendUserLikePost(e);
};

const sendUserLikePost = (likedPhotoUserId) => {
    // ...
    let data = {
        'like': like,
        'UserID': likedPhotoUserId
    };
    // ...