Блог

Я новичок в Context API, во время игры с ним у меня возникли проблемы с доступом и настройкой состояния от дочернего элемента (Movie.js ).

Ошибка во время выполнения

Ошибка типа: объект не может быть итерирован (не удается прочитать символ свойства (Symbol.iterator))

Как это решить?

MovieContext.js — родительский

 import React, { useState, createContext, Children } from "react";

export const MovieContext = createContext();

export const MovieProvider = (props) => {
  const [movies, setMovie] = useState({
    name: "Happy Potter",
    releaseDate: "22 June 2015",
    price: 20,
    id: 23232,
  });

  return <MovieContext.Provider>{props.children}</MovieContext.Provider>;
};
  

App.js

 import React from "react";
import "./App.css";
import Movie from "./Movie";
import { MovieContext, MovieProvider } from "./MovieContext";
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <MovieProvider>
          <Movie />
        </MovieProvider>
      </header>
    </div>
  );
}

export default App;
  

Movie.js — дочерний элемент

 import React, { useState, useContext } from "react";
import { MovieContext } from "./MovieContext";

const Movie = () => {
    const [movies, setMovie] = useContext(MovieContext);

  return (
    <div>
      <h3>{movies.name}</h3>
      <h2>{movies.releaseDate}</h2>
      <h2>{movies.price}</h2>
    </div>
  );
};

export default Movie;
  

[фильмы, setMovie] должны быть переданы в качестве реквизитов в MovieContext.Поставщик.

  return (
    <MovieContext.Provider value={[movies, setMovie]}>
      {props.children}
    </MovieContext.Provider>
  );
  

Примечание: props — это массив, а не объект [фильмы, setMovie]

Вам необходимо передать состояние фильмов в content Provider для последующего использования.

 return <MovieContext.Provider 
           value={{
                 movies,
                 setMovies
           }}>
              {props.children}
       </MovieContext.Provider>;
};