React Context 无法导入答案

【问题标题】：React Context can't be importedReact Context 无法导入
【发布时间】：2019-12-02 21:56:01
【问题描述】：

我正在关注 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 视频中对我不起作用。

溴萨拉

【问题讨论】：

请发布您的代码。问题可能出在您的代码中。
@SerhiiZharkov 现在我已经发布了我的代码，如果你看到 MovieProvider 类，它有两个导出，MovieProvider 被导出但电影上下文没有被导出
我认为你在Titatic 中有错字:-)

标签： reactjs react-native react-context

【解决方案1】：

如果您跟随视频，您应该在App.js 中导入如下内容

 import { MovieProvider } from './MovieContext';

而不是

import { MovieProvider } from './MovieProvider';

并在MovieList.js中导入如下

import { MovieContext } from './MovieContext';

而不是

import { MovieContext } from './Movie';

【讨论】：

嗯，问题是它根本不显示 MovieContext，所以如何导入，问题是为什么它不能导入
在MoviesList.js 上检查您的import {MovieContext}，它应该来自"./MovieContext" 而不是from "./Movie"

【解决方案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

【讨论】：

【解决方案3】：

我发现我的文件名是MovieProvider，这就是为什么它在选项中显示MovieProvider，当我再次看到教程时发现教程中的文件名是MovieContext，现在从MovieProvider重命名后到MovieContext，它按预期工作。谢谢那些回答寿的人。我只是紧张，因为我也在做一个 python 作业，我昨天完成了 python 作业，今天这个问题也解决了。

【讨论】：