无法在 reactjs 的 index.js 文件中添加我的提供程序答案

【问题标题】：Not able to add my provider in side the index.js file in reactjs无法在 reactjs 的 index.js 文件中添加我的提供程序
【发布时间】：2020-08-02 02:13:52
【问题描述】：

我有一个 MovieDetails.js 组件和上下文（名称是 MyContext）和提供者（名称是 MyProvider）。 MyProvider 组件具有电影列表。我想将该列表呈现到 MovieDetails component.so，在 index.js 文件中导入了 MovieDetails 和 MyContext 组件，如下所示

import {MovieDetails} from './Assignment/Topic12Assignment1/MovieDetails'  
import { MyProvider } from './Assignment/Topic12Assignment1/MyContext';

尝试按照以下代码呈现 MovieDetails 组件。

<MyProvider>
ReactDOM.render(<MovieDetails />,document.getElementById('root'));
</MyProvider>

返回错误如下

不明白我错过了什么？

下面的代码是 MovieDetails 组件

import React, { useState, useContext }  from 'react'
import {MyContext} from './MyContext'

export const MovieDetails = () => {
  const [movies,setMovies] = useContext(MyContext);
  debugger
    return(
        <React.Fragment>
      {
              <li>{movies.length}</li>
      }
        </React.Fragment>
    )
}

下面是 MyContext 文件的代码

import React, {useState,createContext} from 'react'
//import AppReducer from './AppReducer'

export const MyContext = createContext();
export const MyProvider = (props) => {
    const [movies,setMovies] = useState([ {MovieID:1,MovieName:'Rangastalam',LeadActor:'RamCharan',LeadActree:'Samantha'
    ,YearOfRelease:2019,Language:'Telugu',Collections:'200Crores'},
   {MovieID:2,MovieName:'AVP',LeadActor:'AlluArun',LeadActree:'Puja'
    ,YearOfRelease:2020,Language:'Telugu',Collections:'400Crores'},
   {MovieID:3,MovieName:'Saaho',LeadActor:'Prabhas',LeadActree:'Shraddha'
    ,YearOfRelease:2020,Language:'Telugu',Collections:'300Crores'}]);

    return(
<MyContext.MyProvider value = {'testomg'}>{props.children}</MyContext.MyProvider>
    );
};

索引文件代码

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import {MovieDetails} from './Assignment/Topic12Assignment1/MovieDetails'
import { MyProvider } from './Assignment/Topic12Assignment1/MyContext';

<MyProvider>
ReactDOM.render(<MovieDetails />,document.getElementById('root'));
</MyProvider>
serviceWorker.unregister();

应用文件代码

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

【问题讨论】：

检查是否正确导出MovieDetails 和MyContext。还要检查您在index.js 中导入文件的方式与您导出文件的方式是否匹配。
你能把代码贴在MovieDetails和MyProvider吗？
我更新了我的查询详情..你能检查一下吗

标签： reactjs react-context

【解决方案1】：

错误在MyProvider文件中

return (
  <MyContext.MyProvider value={"testomg"}>{props.children}</MyContext.MyProvider>
);

应该是

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

另外，在index.js 文件中，这应该更正

<MyProvider>
ReactDOM.render(<MovieDetails />,document.getElementById('root'));
</MyProvider>

应该是

ReactDOM.render(
<MyProvider>
  <MovieDetails />
</MyProvider>
,document.getElementById('root'));

【讨论】：

是的，它是 App.js 文件，但后来我确实更改了 index.js 文件中的代码，如下所示，并将 app.js 文件作为初始版本。 ReactDOM.render(,document.getElementById('root'));
@Surya 更新了上面的评论。
谢谢你，但即使在你提到的更改代码之后仍然出现同样的错误..它在索引中显示错误
@Surya 哦，我想我错过了一点，再次更新