reactjs - 变量不适用于createContext，我应该如何通过状态传递它

Question

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

export const MovieContext = createContext();

const MovieProvider = (props) => {
  const [movies, setMovies] = useState([
    {
      name: "Super Man and The Silly Wonder Woman",
      price: " 54£",
      id: 21,
    },
    {
      name: "League Of Sheppards",
      price: " 54£",
      id: 81,
    },
    {
      name: "Mr Marin The Billionaire",
      price: " 54£",
      id: 21,
    },
  ]);

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

export { MovieProvider };

import React from "react";
import { StyledMovie } from "./movie-list.style";
import { Movie } from "../movie/movie.components";

const MovieList = () => {
  return (
    <StyledMovie>
      {movies.map((movie) => (
        <Movie name={movie.name} price={movie.price} key={movie.id} />
      ))}
    </StyledMovie>
  );
};

export { MovieList };

变量不适用于 createContext，我应该如何通过状态传递它？感谢你们！第 8:8 行：'movies' 未定义，它在 .js 中有效，但如果我使用 jsx 并导入数据，只要我像在 Js 中一样使用 createContext 再次传递它，useState 就会正常工作，它就会死掉。

标签： reactjs

Answer 1

您需要将value道具传递给提供者

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

export const MovieContext = createContext();

const MovieProvider = (props) => {
  const [movies, setMovies] = useState([
    {
      name: "Super Man and The Silly Wonder Woman",
      price: " 54£",
      id: 21,
    },
    {
      name: "League Of Sheppards",
      price: " 54£",
      id: 81,
    },
    {
      name: "Mr Marin The Billionaire",
      price: " 54£",
      id: 21,
    },
  ]);

  return (
    <div>
      <MovieContext.Provider value={movies}>{props.children}</MovieContext.Provider>
    </div>
  );
};

export { MovieProvider };

并使用useContext. 您需要导入MovieContext.

import React,{useContext} from "react";
import { StyledMovie } from "./movie-list.style";
import { Movie } from "../movie/movie.components";

const MovieList = () => {
  const movies = useContext(MovieContext);
  return (
    <StyledMovie>
      {movies.map((movie) => (
        <Movie name={movie.name} price={movie.price} key={movie.id} />
      ))}
    </StyledMovie>
  );
};

export { MovieList };