Javascript 反应嵌套渲染，如果

嘿，你想做一个嵌套的if-in-render方法吗

我的代码：

return(
    <>
    <Logo className='logo' />
    <Menu loadPage={loadPage} />
    {load.favorite ? 
      <Favorite 
        favorite={favorite} 
        addRemoveFavorite={addRemoveFavorite}
        getPersonMovie={getPersonMovie}
      /> 
      :
      <>
      <Card 
        people={people} 
        favorite={favorite} 
        addRemoveFavorite={addRemoveFavorite}
        getPersonMovie={getPersonMovie}
      />
      <Navigate 
        onClick={onClick}
        page={page}
       />
       </>
    }
    </>  
  )
}

返回(
{load.favorite？
:
}
)
}

我想做这样的事

return(
    <>
    {load.page 
    ? 
    <Img />
    : 
    rest code }

返回(
{load.page
? 
: 
rest代码}

不幸的是，代码不起作用，我也不知道为什么。有人能帮忙吗？

import React，{useffect，useState}来自'React'；
import React, {useEffect, useState} from 'react';
import API_URL from './config/API_URL';
import Card from './components/Card';
import Favorite from './components/Favorite';
import Menu from './components/Menu';
import Navigate from './components/Navigate';
import { ReactComponent as Logo} from './logo.svg';
import './scss/App.scss';

const App = () => {
  const [people, setPeople] = useState([]);
  const [films, setFilms] = useState([]);
  const [favorite, setFavorite] = useState([]);
  const [load, setLoad] = useState({favorite: false, page: true });
  const [page, setPage] = useState({next: {}, previous: {}})

  useEffect(() =>{
    (async () => {
      const data = await fetchData(API_URL) 
      const people = await fetchData(data.people)
      const films = await fetchData(data.films)

      setPeople(people.results);
      setFilms(films.results);
      setPage({next: people.next, previous: people.previous});
      setLoad({page: false});
    })()    
  }, [])

  async function fetchData(url) {
    const response = await fetch(url);
    return response.json();
  };

  const getPersonMovie = item => films.filter(film => item.films.includes(film.url))

  const onClick = URL => {
    setLoad({page: true});
    if(URL !== null) {
      fetchData(URL)
        .then(res => {
          setPeople(res.results);
          setPage({next: res.next, previous: res.previous});
          setLoad({page: false});
        })
    }
  }

  const addRemoveFavorite = (item) => {
    if(favorite.includes(item)) {
      const newArr = favorite.filter(el => el !== item)
      setFavorite(newArr);
    } else {
      setFavorite([...favorite, item])
    }
  }
  const loadPage = el => {
    setLoad({favorite: el});
  }



  return(
    <>
    <Logo className='logo' />
    <Menu loadPage={loadPage} />
    {load.favorite ? 
      <Favorite 
        favorite={favorite} 
        addRemoveFavorite={addRemoveFavorite}
        getPersonMovie={getPersonMovie}
      /> 
      :
      <>
      <Card 
        people={people} 
        favorite={favorite} 
        addRemoveFavorite={addRemoveFavorite}
        getPersonMovie={getPersonMovie}
      />
      <Navigate 
        onClick={onClick}
        page={page}
       />
       </>
    }
    </>  
  )
}

export default App;


从“./config/API_URL”导入API_URL；
从“./组件/卡”导入卡；
从“./components/Favorite”导入收藏夹；
从“./组件/菜单”导入菜单；
从“./components/Navigate”导入导航；
从“./Logo.svg”导入{ReactComponent as Logo}；
导入“/scss/App.scss”；
常量应用=（）=>{
const[people，setPeople]=useState（[]）；
const[films，setFilms]=useState（[]）；
const[favorite，setFavorite]=useState（[]）；
const[load，setLoad]=useState（{favorite:false，page:true}）；
const[page，setPage]=useState（{next:{}，previous:{}）
useffect（（）=>{
（异步（）=>{
常量数据=等待获取数据（API_URL）
const people=等待获取数据（data.people）
const films=等待获取数据（data.films）
setPeople（people.results）；
setFilms（films.results）；
setPage（{next:people.next，previous:people.previous}）；
setLoad（{page:false}）；
})()    
}, [])
异步函数获取数据（url）{
const response=等待获取（url）；
返回response.json（）；
};
const getPersonMovie=item=>films.filter（film=>item.films.includes（film.url））
const onClick=URL=>{
setLoad（{page:true}）；
如果（URL！==null）{
获取数据（URL）
。然后（res=>{
setPeople（res.results）；
setPage（{next:res.next，previous:res.previous}）；
setLoad（{page:false}）；
})
}
}
const addRemoveFavorite=（项目）=>{
if（收藏夹。包括（项目））{
const newArr=favorite.filter（el=>el！==item）
setFavorite（newArr）；
}否则{
setFavorite（[…收藏夹，项]）
}
}
const loadPage=el=>{
setLoad（{favorite:el}）；
}
返回(
{load.favorite？
:
}
)
}
导出默认应用程序；

实际上，您的代码应该是

load.page？

而不是

load.favorite

…但是 你可以清楚地为你想要的设置一个钩子。例如：

const [loadImg, setLoadImg] = useState(true);

useEffect(() => {
    async function done....
    setLoadImg(false);
}, [])

...    {loadImg ? <ComponentThis /> : <ComponentThat /> }

const[loadImg，setLoadImg]=useState（true）；
useffect（（）=>{
异步函数已完成。。。。
setLoadImg（假）；
}, [])
…{loadImg？：}

我想你应该给我们提供更多关于你的状态的信息。似乎有点类似我的加载状态是load=[{favorite:false，page:true}]在收到APIC的响应之前，我想使用load.page来呈现IMG。你可以显示完整的代码吗？这可能是一个异步错误