如何使用 React.js 中的 useParams 从组件中获取数据？

Question

我与 React 的 API 通话有问题。 当我直接在组件内部获取数据时，使用以下代码效果很好：

export default function WeightFollowUp() {
   const {userId} = useParams()
   const [statistics, setStatistics] = useState(null)


  useEffect(()=>{
    async function fetchActivityData() {
      try{
        const response = await fetch (`http://localhost:3000/user/${userId}/activity`)
        const results = await response.json()
        setStatistics(results.data.sessions)
      }
      catch(err){
        console.log(err)
      }
      finally{
        console.log("Fetch completed")
      }
    }
    fetchActivityData()
  }, [])

然后我想从另一个文件导入 fetchActivityData 函数，以便在同一个地方获取我所有的 futur API 调用。 于是就变成了这段代码：

  useEffect(()=>{
    fetchActivityData()
  }, [])

对于第二个版本，控制台显示如下错误消息：

ReferenceError: userId is not defined
    at fetchActivityData (APIcall.jsx:3:1)

是否有其他解决方案来解决此问题，请记住，从组件中获取数据对于该项目是强制性的。 ？？

我试图将 useParams 放在我的 APIcall 文件中，但 useParams 仅在组件内部工作。

谢谢你们的帮助。

Answer 1

当您创建 fetchActivityData function 时，只需传递两个参数 userId 和 setStatistics，如下所示：

async function fetchActivityData(userId, setStatistics) {
  try{
    const response = await fetch (`http://localhost:3000/user/${userId}/activity`)
    const results = await response.json()
    setStatistics(results.data.sessions)
  }
  catch(err){
    console.log(err)
  }
  finally{
    console.log("Fetch completed")
  }
}

当您调用 WeightFollowUp 组件时，只需传递参数 userId 和 setStatistics 即可更改您的 state。

useEffect(()=>{
  fetchActivityData(userId, setStatistics)
}, [])