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

Question

我的 API 调用 React 时遇到问题。当我直接在组件内部获取数据时，使用此代码效果很好：

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 函数，以便在同一个地方获得我所有的未来 API 调用。所以它变成了这个代码：

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

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

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

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

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

谢谢大家的帮助。

Answer 1

创建 fetchActivityData 函数时，只需传递两个参数 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 即可更改您的状态。

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

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

How can I fetch data out of a component, using useParams in React.js?

reactjs

api

call