我正在做一个简单的应用程序,我想在文本中呈现第二个结果的结果,因此用户可以看到练习名称,但我可以同时记录两者,但无法在文本中返回它。我试图将结果保存在状态变量中,但它会无限循环。
function UserPlan({route}) {
const id = route.params.id;
const token = route.params.token;
//console.log(id, token);
let myData ={}
function getExercises() {
fetch(`https://startdoing.herokuapp.com/user_plans/plan/${id}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`,
},
})
.then((response) => response.json())
.then((result) => {
result.map((result) => {
//console.log(result.exercises);
result.exercises.map((data) => {
//console.log(data.exercise_id);
fetch(
`https://startdoing.herokuapp.com/exercises/${data.exercise_id}`,
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`,
},
},
)
.then((response) => response.json())
.then((result) => {
myData=result
console.log(myData.exerciseName);
/* console.log(result);
console.log(result.exerciseName);
console.log(result.videoUrl); */
})
.catch((error) => console.log('error', error));
});
});
})
.catch((error) => console.log('error', error));
}
useEffect(() => {
getExercises();
});
return(
<>
<Text>hello</Text>
</>
)
}
export default UserPlans;
答案 0 :(得分:0)
function UserPlan({route}) {
const id = route.params.id;
const token = route.params.token;
//console.log(id, token);
let myData ={}
const [myExcerciseData, setExcerciseData] = useState(null)
function getExercises() {
fetch(`https://startdoing.herokuapp.com/user_plans/plan/${id}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`,
},
})
.then((response) => response.json())
.then((result) => {
result.map((result) => {
//console.log(result.exercises);
result.exercises.map((data) => {
//console.log(data.exercise_id);
fetch(
`https://startdoing.herokuapp.com/exercises/${data.exercise_id}`,
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`,
},
},
)
.then((response) => response.json())
.then((result) => {
myData=result
setExcerciseData(result)
console.log(myData.exerciseName);
/* console.log(result);
console.log(result.exerciseName);
console.log(result.videoUrl); */
})
.catch((error) => console.log('error', error));
});
});
})
.catch((error) => console.log('error', error));
}
useEffect(() => {
getExercises();
},[]); //if you pass variable here it will create infinite loop
useEffect(() => {
console.log("updated data")
},[myExcerciseData]);
return(
<>
{myExcerciseData ?
<Text>{myExcerciseData.exerciseName}</Text>
:
<Text>Loading...</Text>
</>
)
}
export default UserPlans;
这应该可行,请检查一次,如果有任何问题请回复