从 API 获取后数据为空

Question

我正在尝试为投资组合制作电影应用程序，我有一个带有一些数据的 api，我正在尝试使用 useEffect 获取它然后设置状态，我还使用 useContext 挂钩将数据传递给子道具但数据为空.

This is 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([]);

  useEffect(() => {
    Axios.get("http://www.omdbapi.com/?s=star wars&apikey=459f1ce1").then((res) => {
      setData(res.data.Search);
    })
  }, []);
  
  return (
    <div className="App">
      <AppContext.Provider value={data}>
        <Main />
      </AppContext.Provider>
    </div>
  );
}

export default App;

This is 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>

  </div>;
};

export default Main;

Answer 1

目前上下文的value只是data状态的值。有能力去解构上下文将您的值更改为包含数据的对象。

<AppContext.Provider value={{ data }}>