从对象 React Native 渲染

Question

我正在做一个简单的应用程序，我想在文本中呈现来自第二个 fecth 的结果，因此用户可以看到练习名称，但我可以同时记录两者，但我无法在文本中返回它。我试图将结果保存在状态变量中，但它执行了无限循环。

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;

Answer 1

    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;

这应该可以，请检查一次，如果有任何问题，请恢复

Answer 2

// If you want to fetch the first time only, add dependencies that makes your effect run again when changes.
// In this case they are id and token

 const [exercises, setExercises] = useState([])

 useEffect(() => {
 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) => {
          
          Promise.all(result.exercises.map((data) => {
            
            return fetch(
              `https://startdoing.herokuapp.com/exercises/${data.exercise_id}`,
              {
                method: 'GET',
                headers: {
                  'Content-Type': 'application/json',
                  Authorization: `Bearer ${token}`,
                },
              },
            )
              .then((response) => response.json())
            ).then((exercises) => {
   
                setExercises(exercises)
             })
              
          });
        });
      })

      .catch((error) => console.log('error', error));
  }


    getExercises();
  }, [id, token]); // <-- Here

阅读更多https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects