React.js中无法实现广告点赞递增功能的技术求助

你的代码核心问题在于用了一个全局的currLike状态管理所有广告的点赞数，不符合每条广告独立计数的需求，且点赞逻辑、状态更新均存在错误，具体修复如下：

1. 移除无用全局状态 #

删掉const [currLike, setLike] = useState(0);，每条广告的点赞数已存在adsList的对应元素中，无需单独全局状态。

2. 修正点赞请求逻辑 #

addLike函数需要基于当前广告的现有点赞数加1后传给后端，同时去掉错误的setLike调用，改用重新拉取广告数据更新页面：

const addLike = async (id, currentLikes) => {
  await axios.put('http://localhost:3001/update', {
    id: id,
    likes: currentLikes + 1
  });
  getAds();
};

3. 调整按钮点击传参 #

渲染广告时，给点赞按钮传入当前广告的likes值：

<button 
  type="button" 
  onClick={() => addLike(val.id, val.likes)} 
  className="btn btn-success"
>
  LIKE
</button>

4. 优化页面更新方式 #

删除window.location.reload()，改用getAds()更新adsList状态实现局部刷新，提升体验。

完整修改后代码 #

function Ads() {
  const [selectedDate, setSelectedDate] = useState(null);
  const [adsList, showAdsList] = useState([]);

  const getAds = async () => {
    const response = await axios.get('http://localhost:3001/showAds');
    showAdsList(response.data);
  };

  const addLike = async (id, currentLikes) => {
    await axios.put('http://localhost:3001/update', {
      id: id,
      likes: currentLikes + 1
    });
    getAds();
  };

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

  return (
    <div>
      <div className="showAds" >
        {adsList.map((val, key) => {
          return (
            <div className="ad" key={key}>
              <h4>{val.content}</h4>
              <h5><a href="">{val.adress}</a></h5>
              <h5>Likes: {val.likes}</h5>
              <div>
                <button 
                  type="button" 
                  onClick={() => addLike(val.id, val.likes)} 
                  className="btn btn-success"
                >
                  LIKE
                </button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default Ads;

可选优化 #

如果要防止用户重复点击同一广告点赞，可新增状态记录已点赞的广告ID：

• 新增状态：const [likedAds, setLikedAds] = useState([]);
• 在addLike中先判断likedAds是否包含当前广告ID，若包含则不发起请求，否则请求后将ID加入likedAds
• 按钮添加禁用状态：disabled={likedAds.includes(val.id)}

内容的提问来源于stack exchange，提问作者user19460705