如何在反应中使用 console.log

Question

我是新手，我有一个获取操作，我想在使用 api 之前使用 console.log 检查数据，就像在 javascript 中一样，但我想不通了解如何在反应中做到这一点...有帮助吗？

const [all, setAll]=React.useState([])

React.useEffect(()=>{ 
    fetch('https://api.themoviedb.org/3/trending/all/day?api_key=key')
    .then(data=>{
       return data.json()
    }).then(completedata=>{
       setAll(completedata)

    })
    .catch((err) => {
        console.log(err.message);
        
      })
    
},[1])
console.log(all)

Answer 1

仍然是 Javascipt，在承诺链中使用 console.log(data.results)，或者 useEffect 钩子中的 all 状态依赖于 all 状态。

const [all, setAll] = React.useState([]);

React.useEffect(() => { 
  fetch('https://api.themoviedb.org/3/trending/all/day?api_key=key')
    .then(data => {
      return data.json();
    })
    .then(data => {
      setAll(data.results);
      console.log(data.results);
    })
    .catch((err) => {
      console.log(err.message);
    });
},[]);

或

const [all, setAll] = React.useState([]);

useEffect(() => {
  console.log(all);
}, [all]);

Answer 2

您可以像 javascript 中那样使用：

}).then(completedata=>{
   setAll(completedata)
console.log("your complete data is here"+JSON.stringify(completedata))

})

Answer 3

import {useState,useEffect} from 'react';

const [all, setAll] = useState([]);

useEffect(()=>{ 
  fetDataFromApi()
},[]);


const fetDataFromApi = async () => {
      const data = await fetch('https://api.themoviedb.org/3/trending/all/day?api_key=key')
      const movies = data.json();
      if(movies.error){
         console.log('error -> ',movies.error)
      else{
        setAll(movies.results)
    }
  }
}

return(
<>
{JSON.stringify(all)}
</>
)

如何在反应中使用 console.log

how to use console.log in react

javascript

reactjs

console.log