reactjs - React Context 无法导入

Question

我正在关注 Youtube 上的教程https://www.youtube.com/watch?v=35lXWvCuM8o

在 17:45 时它没有import MovieProvider from "./MovieContext"，但是当你看到教程并且我所做的一切都完全一样时它会发生，可能是什么原因？

import React from "react";
import "./App.css";
import MoviesList from "./MoviesList";
import { Movi } from "./Movie";
import { MovieProvider } from "./MovieProvider";

function App() {
  return (
    <MovieProvider>
      <div className="app">
        <MoviesList />
      </div>
    </MovieProvider>
  );
} 

 export default App;

import React, { useState, useContext } from "react";
import Movie from "./Movie";
import { MovieContext } from "./Movie";
const MoviesList = () => {
  const value = useContext(MovieContext);
  return (
    <div>
      <h2>{value}</h2>
      {/*movies.map(movie => (
        <Movie name={movie.name} price={movie.price} />
      ))*/}
    </div>
  );
};

export default MoviesList;

import React from "react";
import "./App.css";

const Movie = ({ name, price }) => {
  return (
    <div className="movie">
      <h2>{name}</h2>
      <p>{price}</p>
    </div>
  );
};

export default Movie;

import React, { useState, createContext } from "react";

export const MovieContext = createContext();

export const MovieProvider = props => {
  const [movies, setMovies] = useState([
    { name: "Brave heart", price: "10$" },
    { name: "Mission impossible", price: "20$" },
    { name: "Titatic", price: "5$" }
  ]);

  return (
    <MovieContext.Provider value={"Hello"}>
      {props.children}}
    </MovieContext.Provider>
  );
};

PS：我遵循了其他教程，其中 Context API 与同一文件中的类一起使用，它在这个 Youtube 视频中对我不起作用。

布拉萨拉

标签： reactjsreact-nativereact-context

Answer 1

如果您按照视频进行操作，则应按以下方式导入App.js

 import { MovieProvider } from './MovieContext'; 

并不是

import { MovieProvider } from './MovieProvider';

并且还导入如下MovieList.js

import { MovieContext } from './MovieContext';

并不是

import { MovieContext } from './Movie';