React nested if

Question

嘿，我想在render方法中做一个嵌套的if

我的代码：

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}
       />
       </>
    }
    </>  
  )
}

我想让一些人这样想

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

不幸的是，这些代码不能工作，我不知道为什么。有人能帮帮忙吗？

Answer 1

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;

Answer 2

实际上你的代码应该是load.page ?而不是load.favorite...但是你可以清楚地只为你想要的东西设置一个钩子..例如：

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

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

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