React中使用react-share包实现分享计数始终为0如何解决

核心问题原因 #

• 代码参数不匹配：分享按钮绑定的待分享地址是currentPostUrl，但计数组件传入的统计地址是硬编码的https://www.example.com/，两个地址完全不一致，无法统计到对应链接的分享数据。
• 平台接口已废弃：Meta（Facebook）早在2020年就下线了无鉴权的公开分享计数接口，react-share内置的FacebookShareCount依赖的旧接口已停止服务，无合法鉴权参数的请求无法拿到真实分享数据，这是计数始终为0的核心原因，和基础组件写法无关。
• 测试环境不符合要求：如果在本地localhost开发环境测试，本地地址无法被公网访问，所有平台的公开分享计数接口都会返回0。

修复方案 #

1. 首先统一组件传入的URL参数，保证分享按钮和计数组件统计的是同一个链接，修正后的参考代码如下：

<FacebookShareButton url={currentPostUrl} quote='This is MSN' >
  <FacebookIcon size={30} borderRadius={15} />
  <FacebookShareCount url={currentPostUrl}>
    {shareCount => <div>{shareCount || 0}</div>}
  </FacebookShareCount>  
</FacebookShareButton>

2. 针对Facebook接口失效的问题，可二选一处理：
   • 若必须展示Facebook分享计数，弃用react-share内置的计数组件，自行对接Meta官方Graph API：先申请Facebook开发者资质、创建应用获取access token，通过后端中转调用接口获取对应链接的分享数据，禁止在前端直接暴露access token。
   • 若不想额外开发对接接口，可直接移除Facebook分享计数展示，仅保留分享按钮功能即可。其余未关闭公开计数接口的平台（如Reddit、Linkedin等）对应的ShareCount组件，在URL参数正确、链接可公网访问的前提下可正常使用。
3. 测试时使用已正式部署、可被公网正常访问的链接，不要用本地开发地址或内网地址测试计数功能。

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