我用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
只在组件内部工作。
1条答案
按热度按时间jgovgodb1#
当你创建fetchActivityData函数时,只需要传递两个参数userId和setStatistics,类似这样:
字符串
当你调用你的WeightFollowUp组件时,只需要传递参数userId和setStatistics来改变你的状态。
型