reactjs - 如何获取项目以使其不为空（useEffect）？

Question

如何获取项目以使其不为空？我正在尝试将我通过useEffect得到的值写入sidebat -> items，但是我得到null，一般来说，是否必须使用2个useEffect？也许您可以通过某种方式做到这一点，以免重复代码？

const [sidebarItemsLeagues, setSidebarItemsLeagues] = useState(null);
const [sidebarItemsCountries, setSidebarItemsCountries] = useState(null);

const [sidebars] = useState({
    leagues: {
        title: "TITLE 1", 
        items: sidebarItemsLeagues // null...
    },
    countries: {
        title: "TITLE 2",
        items: sidebarItemsCountries // null...
    }
});

useEffect(() => {
    api.getTestLeagues()
    .then(data => setSidebarItemsLeagues(data)); // for items 1 (not null)
}, []);

useEffect(() => {
    api.getTestCountries()
    .then(data => setSidebarItemsCountries(data)); // for items 2 (not null)
}, [])

Answer 1

2useEffect不是强制性的，您可以一个一个地进行两次提取......但您可能希望在 parralel中运行它们，而不是按顺序运行它们。

您可以通过以下方式阻止使用空数据进行渲染

<>
  {sidebarItemsLeagues && sidebarItemsCountries && ( 
    <LeaguesList data={sidebarItemsLeagues} />
    <Countries data={sidebarItemsCountries} />
  )}
</>

Answer 2

如果sidebars是计算值，则不要为其创建状态变量。通过使用useState你只指定它的初始值是什么，然后任何更新都需要通过调用来完成setSidebars，你永远不会这样做。

const sidebars = {
    leagues: {
        title: "TITLE 1", 
        items: sidebarItemsLeagues
    },
    countries: {
        title: "TITLE 2",
        items: sidebarItemsCountries
    }
}