React.js with fetch api and console.log()

Question

我无法在此barebones React组件中记录或显示数据。我只是想简单地使用fetchapi获取我的转发。当我在开发工具中查看"网络"选项卡时，我得到了回复。

我试图将调用封装在useEffect()中(然后将来自response的数据存储到一个状态变量中(，但没有成功，所以这就是为什么我现在有这个基本组件的原因。

const Component = () => {
const [repos, setRepos] = useState([])

useEffect(() => {
// fetch call used to be here
}, [])
const data = fetch('https://api.github.com/users/alexspurlock25/repos')
.then(response => response.json())
.then(data => setRepos(data))
console.log(data)
console.log(repos)
return (
<div>
{
repos.map(items => console.log(items))
}
</div>
)
}

为什么我不能记录或map数据？我做错什么了吗？

Answer 1

创建一个处理api调用的异步函数。然后调用useEffect中的函数。由于回购是一个空数组，因此不会记录任何内容。一旦你的api调用解析并且repos状态已经更新，react就会做它自己的事情并重新渲染，导致repos.map再次运行并注销repos

const Component = () => {
const [repos, setRepos] = useState([])

const fetchData = async ()=>{

let res = await fetch('https://api.github.com/users/alexspurlock25/repos')
let data = await res.json()
setRepos(data)

}


useEffect(() => {
// fetch call used to be here
fetchData()
}, [])

return (
<div>
{
repos.map(items => console.log(items))
}
</div>
)
}

Answer 2

您必须验证repo是否已定义并包含数据，才能执行以下

//mock up API
const API = (ms = 800) => new Promise(resolve => setTimeout(resolve, ms, {state:200, data:[1,2,3,5]}));
ReactDOM.render(
<App />,
document.body
);

function App(props){
const [repos, setRepos] = React.useState([]);

React.useEffect(() => {
API()
.then(res => setRepos(res.data));
},[])


return <div>{
// Check Here
repos.length > 1 ? repos.map((r,i) => <div key={`${r}-${i}`}>{r}</div>) : <div>Loading ...</div>
}</div>
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

Answer 3

const Component = () => {
const [repos, setRepos] = useState([])

useEffect(() => {
const data = fetch('https://api.github.com/users/alexspurlock25/repos')
.then(response => response.json())
.then(data => setRepos(data))
console.log(data)
}, [])

console.log(repos)
return (
<div>
{
repos.map(items => console.log(items))
}
</div>
)
}