Не удалось добавить моего провайдера в файл index. js в reactjs - PullRequest
Новая
       37

Не удалось добавить моего провайдера в файл index. js в reactjs

0 голосов
/ 01 августа 2020

У меня есть компонент 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>

возвращает ошибку, как показано ниже

enter image description here

not understanding where did i miss anything?

below code is MovieDetails component

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

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

Below code for MyContext file

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(
{props.children}
    );
};

index file code

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


ReactDOM.render(,document.getElementById('root'));

serviceWorker.unregister();

app file code

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

function App() {
  return (
     lo go Отредактируйте src/App.js и сохраните для перезагрузки.  Изучите React   ); } экспортировать приложение по умолчанию;

1 Ответ

0 голосов
/ 01 августа 2020

Ошибка находится в 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'));
...