react组件传递的是useState的默认值，而不是传递API数据。
react组件传递的是useState的默认值，而不是传递API数据。
提问于 2020-09-26 23:44:56
我的父组件中有这个API调用。
我试图把它的数据作为道具传递给他们的子组件。
组件正在传递的数据是变量的初始状态，而不是API数据。这会扰乱应用程序的其余部分。
这是我的密码
import React, { useState, useEffect } from 'react';
import './App.css';
import Playlists from './Playlists';
import PlaylistFilter from './PlaylistFilter';
import axios from 'axios';
function App() {
const [filters, setFilters] = useState(['initial state'])
const [playlists, setPlaylists] = useState([])
useEffect( ()=> {
axios.get(`/api/filters`)
.then(res => setFilters(res.data.filters))
.catch(err => console.log(err))
}, [])
//console.log(filters)
useEffect( ()=> {
axios.get(`/api/playlists`)
.then(res => setPlaylists(res.data.filters))
.catch(err => console.log(err))
}, [])
//console.log(playlists)
return (
<div className="App">
<PlaylistFilter filters={filters} />
<Playlists playlists={playlists} />
</div>
);
}
export default App;
(URL也是这样的，因为我已经在我的package.json中配置了代理)
当我使用console.log检查API调用时，它第一次运行它只显示默认值，然后它打印API调用3次，如下所示
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-09-26 23:50:37
一种选择是只在filters和playlists都被填充后才呈现应用程序。将其初始状态设置为未定义或空，然后使用条件呈现：
function App() {
const [filters, setFilters] = useState();
const [playlists, setPlaylists] = useState();
// ...
return (
<div className="App">
{
filters && playlists && (<>
<PlaylistFilter filters={filters} />
<Playlists playlists={playlists} />
</>)
}
</div>
);
}这样，如果PlaylistFilter和Playlists期望最初的道具会被填充，他们就不会在初始挂载上窒息。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64083501
复制相关文章
相似问题
腾讯云开发者
