react 组件传递 useState 的默认值而不是传递 API 数据

Question

我的父组件中有这个 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 调用时，它第一次运行它只显示默认值，然后像这样再打印 3 次 API 调用

Answer 1

一种选择是仅在填充filters和playlists后才呈现应用程序。 将它们的初始状态设置为 undefined 或 null，然后使用条件渲染：

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期望填充向下传递的初始道具，则它们不会在初始安装时窒息。