如何在useState钩子中导出状态并在其他组件中使用它

Question

所以我创建了一个电影数据库应用程序，我想在不同的类别之间切换，如顶级，流行等。我试图通过将状态设置为任何点击的文本值，稍后将用于形成完整的网址来获取。

这是我的代码：

App。js

import Movie from "./components/Movie";
import requests from "./components/ApiRequest";
import Navbar from "./components/Navbar";

function App() {

  return (
    <div className="App">
      <Navbar />
      <div className="movie-container">
        <Movie fetchUrl={requests.fetchTrending} />
      </div>
        
    </div>
  );
}

export default App;

Navbar。js

import React, { useState } from 'react'
import SearchBar from './SearchBar'
import { FiFilter } from 'react-icons/fi'
import requests from "../components/ApiRequest";


const Navbar = () => {
    const [category, setCategory] = useState('Trending')

    return (
        <div className="navbar-container">
            <button className="navbar-btn"><FiFilter />Filter</button>
            <div className="categories">
                <button onClick={() => setCategory("Trending")}>Trending</button>
                <button onClick={() => setCategory("Popular")}>Popular</button>
                <button onClick={() => setCategory("TopRated")}>Top Rated</button>
                <button onClick={() => setCategory("Upcoming")}>Upcoming</button>
            </div>
            <SearchBar />
        </div>
    )   
}

所以我想从Navbar获取category的值。js在函数外部，并在此处使用它




Answer 1

你需要提升你的状态。这意味着你的useState类别钩子必须在父组件中，父组件可以将此数据作为道具传递给子组件。在你的情况下，电影组件的父组件是应用组件，所以应用组件必须包含

const [category, setCategory] = useState('Trending')

现在，您可以将“类别”道具传递给电影组件，并将“类别”设置为导航栏组件

Answer 2

您应该将状态提升到一个共同的祖先，即在这种情况下的App，在那里它可以作为道具传递给子组件。

例子：

function App() {
  const [category, setCategory] = useState('Trending');

  return (
    <div className="App">
      <Navbar setCategory={setCategory}/>
      <div className="movie-container">
        <Movie fetchUrl={requests.fetchTrending(category)} />
      </div>
        
    </div>
  );
}

...

const Navbar = ({ setCategory }) => {
  return (
    <div className="navbar-container">
      <button className="navbar-btn"><FiFilter />Filter</button>
      <div className="categories">
        <button onClick={() => setCategory("Trending")}>Trending</button>
        <button onClick={() => setCategory("Popular")}>Popular</button>
        <button onClick={() => setCategory("TopRated")}>Top Rated</button>
        <button onClick={() => setCategory("Upcoming")}>Upcoming</button>
      </div>
      <SearchBar />
    </div>
  )   
}