无法在 reactjs 中的 index.js 文件中添加我的提供者

Question

我有一个 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;

Answer 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'));

无法在 reactjs 中的 index.js 文件中添加我的提供者

Not able to add my provider in side the index.js file in reactjs

reactjs

react-context