React电影作品集应用：API获取数据后data为空，useContext传值异常

核心问题 #

• 解构不匹配：你在Main组件中使用对象解构const { data } = useContext(AppContext);，但App组件的AppContext.Provider传递的是直接的数组data，而非包含data属性的对象，这会导致你拿到的data为undefined，表现为“数据为空”。

修复步骤 #

1. 修正Main组件的上下文取值方式 #

将对象解构改为直接赋值，匹配Provider传递的数据类型：

// Main.js
import React from "react";
import { useContext } from "react";
import { AppContext } from "../../App";
import "./Main.css";

export const Main = () => {
  const data = useContext(AppContext); // 移除对象解构的{}
  console.log(data);

  return <div>
    {/* 示例：遍历渲染电影数据 */}
    {data.map(movie => (
      <div key={movie.imdbID} className="movie-item">
        <h3>{movie.Title}</h3>
        <p>上映年份：{movie.Year}</p>
      </div>
    ))}
  </div>;
};

export default Main;

2. 处理API请求的边界情况 #

API请求可能存在延迟、失败或无结果的情况，建议补充异常处理和状态判断：

// App.js
import "./App.css";
import { useEffect, useState, createContext } from "react";
import Axios from "axios";
import { Main } from "./components/Main/Main";

export const AppContext = createContext();

function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    Axios.get("http://www.omdbapi.com/?s=star wars&apikey=459f1ce1")
      .then((res) => {
        if (res.data.Search) {
          setData(res.data.Search);
        } else {
          setError("未找到相关电影数据");
        }
      })
      .catch(err => {
        setError(`请求失败：${err.message}`);
        console.error("API请求错误:", err);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);
  
  return (
    <div className="App">
      <AppContext.Provider value={data}>
        {loading && <div>加载中...</div>}
        {error && <div className="error">{error}</div>}
        {!loading && !error && <Main />}
      </AppContext.Provider>
    </div>
  );
}

export default App;

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