问如何在两个组件之间传递对象和状态

EN

import Header from "./components/Header";
import SubCard from "./components/SubCard";

function App() {
  return (
    <div className="app">
      <div className="app__left">
        <Header />
        <div className="app__stats">
          <SubCard title="Cases" cases={_cases} total={2000} />

          <SubCard title="Recovered" cases={4000} total={2000} />

          <SubCard title="Deaths" cases={4000} total={2000} />
        </div>
        <Map />
      </div>

      <div className="app__right_bar">
        <SideBar />
        {/* Graph */}
      </div>
    </div>
  );
}

export default App;

function Header({ _cases, _recovered, _deaths }) {
  const [countries, setCountries] = useState([]);
  const [country, setCountry] = useState("worldwide");
  const [countryInfo, setCountryInfo] = useState({});

  const _cases = countryInfo.todayCases;
  const _recovered = countryInfo.todayRecovered;
  const _deaths = countryInfo.todayDeaths;
  useEffect(() => {
    // async -> send a request, wait for it and do something

    const getCountriesData = async () => {
      await fetch(`${COUNTRIES_URL}`)
        .then((response) => response.json())
        .then((data) => {
          const countries = data.map((country) => ({
            name: country.country, //country name ex United Kingdom
            value: country.countryInfo.iso2, // country code ex: UK
          }));
          setCountries(countries);
        });
    };
    getCountriesData();
  }, []);

  const onCountryChange = async (event) => {
    const countryCode = event.target.value;
    setCountry(countryCode);

    const url =
      countryCode === "worldwide"
        ? WORLDWIDE_URL
        : `${COUNTRIES_URL}/${countryCode}`;

    await fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setCountry(countryCode);
        setCountryInfo(data);
      });
  };
  console.log("Country info here >>>", countryInfo);

  return (
    <div className="app__header">
      <h1>Covid 19 tracker</h1>
      <FormControl className="app__dropdown">
        <Select variant="outlined" onChange={onCountryChange} value={country}>
          <MenuItem value="worldwide">Worldwide</MenuItem>
          {countries.map((country) => (
            <MenuItem value={country.value}>{country.name}</MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

export default Header;

function SubCard({ title, cases, total }) {
  return (
    <div>
      <Card className="sub_card">
        <CardContent>
          {/*Title */}
          <Typography color="primary">{title}</Typography>

          {/*Number of Cases */}
          <h2 className="card_cases">{cases}</h2>

          {/*Total */}
          <Typography className="card_total" color="textSecondary">
            {total} Total
          </Typography>
        </CardContent>
      </Card>
    </div>
  );
}

export default SubCard;