如何使用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函数，以便在同一个位置获得我未来所有的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)
}, [])