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视频中对我来说不起作用。

溴萨拉

Answer 1

如果您跟随视频，则应按照App.js

中的说明进行导入

 import { MovieProvider } from './MovieContext';

而不是

import { MovieProvider } from './MovieProvider';

并同样在MovieList.js

中进行导入

import { MovieContext } from './MovieContext';

而不是

import { MovieContext } from './Movie';

Answer 2

您似乎对import的内容缺乏了解。

查看代码时，看起来好像总共有四个js文件。

App.js，Movie.js，MoviesList.js，other.js（名称未知）

MovieContext和MovieProvider都在other.js文件中。

因此，导入如下：

import { MovieProvider, MovieContext } from './other.js'; <= your file path

OR

import { MovieProvider, MovieContext } from './other'; <= your file path

Answer 3

我发现我的文件名是MovieProvider，这就是为什么它在选项中显示MovieProvider的原因，当我再次看到该教程时，发现教程中的文件名是MovieContext，现在重命名之后从MovieProvider到MovieContext，它可以正常工作。感谢您的答复。我当时只是紧张，因为coz也在从事python作业，昨天我完成了python分配，今天这个问题也解决了。

无法导入React Context

3 个答案: