如何导出useState hook中的state并在其他组件中使用

解决方案核心：状态提升+动态对象属性访问 #

你需要把共享的category状态从Navbar子组件移动到共同父组件App中，再通过props把状态和修改状态的方法传递给Navbar，同时在App中用动态属性访问的方式获取对应分类的接口地址。

修改后的App.js代码 #

import Movie from "./components/Movie";
import requests from "./components/ApiRequest";
import Navbar from "./components/Navbar";
import { useState } from "react";

function App() {
  // 将category状态提升到App组件管理
  const [category, setCategory] = useState('Trending')

  return (
    <div className="App">
      {/* 把状态修改方法和当前选中分类传给Navbar组件 */}
      <Navbar setCategory={setCategory} currentCategory={category} />
      <div className="movie-container">
        {/* 用方括号语法动态访问requests对象的对应属性 */}
        <Movie fetchUrl={requests[`fetch${category}`]} />
      </div>
    </div>
  );
}

export default App;

修改后的Navbar.js代码 #

import React from 'react'
import SearchBar from './SearchBar'
import { FiFilter } from 'react-icons/fi'

// 从props接收父组件传来的方法和状态
const Navbar = ({ setCategory, currentCategory }) => {
    return (
        <div className="navbar-container">
            <button className="navbar-btn"><FiFilter />Filter</button>
            <div className="categories">
                {/* 额外加了active类判断，方便给当前选中分类加高亮样式，不需要可删除 */}
                <button onClick={() => setCategory("Trending")} className={currentCategory === "Trending" ? "active" : ""}>Trending</button>
                <button onClick={() => setCategory("Popular")} className={currentCategory === "Popular" ? "active" : ""}>Popular</button>
                <button onClick={() => setCategory("TopRated")} className={currentCategory === "TopRated" ? "active" : ""}>Top Rated</button>
                <button onClick={() => setCategory("Upcoming")} className={currentCategory === "Upcoming" ? "active" : ""}>Upcoming</button>
            </div>
            <SearchBar />
        </div>
    )   
}

export default Navbar;

注意事项 #

• JS中访问对象的动态属性必须用对象[动态属性名]语法，不能直接用requests.fetch{category}这种写法，用模板字符串拼接出fetchTrending、fetchPopular等key即可拿到对应接口地址。
• 要在Movie组件中把fetchUrl作为useEffect的依赖项，切换分类时才会自动重新拉取数据，参考逻辑：

// Movie组件内请求逻辑示例
useEffect(() => {
  const fetchMovies = async () => {
    const res = await axios.get(fetchUrl)
    // 处理返回的电影数据
  }
  fetchMovies()
}, [fetchUrl])

内容的提问来源于stack exchange，提问作者Xtense