Reactjs 如何将元素与在react钩子中单击的数据相匹配？

我正在尝试创建一个模式，该模式将显示所单击元素上的所有数据。

---

例如，如果我单击一部电影的id（367），它将显示标题、类型和发布日期。

首先，我创建了一个Context.js，它将在组件movie.js中发送数据：

Context.js

import React, { useState, useEffect, createContext } from "react";
import { getAxios } from "../Function/index";
const MovieContext = createContext();

const MovieProvider = ({ children }) => {
  const [datas, setDatas] = useState([]);
  const [testdatas, testsetDatas] = useState([]);

  const getMovie = async () => {
    const data = await getAxios(
      "https://api.themoviedb.org/3/movie/upcoming?api_key={}"
    );
    setDatas(data.results);
  };
  useEffect(() => {
    getMovie();
  }, []);

  
  return (
    <MovieContext.Provider value={{ datas, testdatas }}>{children}</MovieContext.Provider>
  );
};

export { MovieContext, MovieProvider };

import React，{useState，useffect，createContext}来自“React”；
从“./Function/index”导入{getAxios}；
const MovieContext=createContext（）；
const MovieProvider=（{children}）=>{
const[datas，setDatas]=useState（[]）；
const[testdatas，testsetDatas]=useState（[]）；
const getMovie=async（）=>{
常量数据=等待getAxios(
"https://api.themoviedb.org/3/movie/upcoming?api_key={}"
);
setDatas（data.results）；
};
useffect（（）=>{
getMovie（）；
}, []);
返回(
{儿童}
);
};
导出{MovieContext，MovieProvider}；

Movie.js

  import React, { useContext } from "react";
import { MovieContext } from '../Context'
import { Card, Row, Tag } from 'antd'


const Main = () => {
  const { datas } = useContext(MovieContext)
  return (
    <Row gutter={16}>
      {datas.map((item, id) => (
        <Card
          key={id}
          style={{ width: 300, margin: 10 }} bordered={true}
          hoverable
        >
          <div>
            <p style={{ textAlign: "left" }}>{item.title} <span style={{ float: "right" }}>{item.vote_average}</span></p>
          </div>
          <p><img src={`https://image.tmdb.org/t/p/w500/${item.poster_path}`} alt="#" width="200" height="200" /></p>
          <Tag color="red"> {item.title}</Tag>
        </Card>
      ))}
    </Row >
  );
};

export default Main;

import React，{useContext}来自“React”；
从“../Context”导入{MovieContext}
从“antd”导入{卡片、行、标记}
常量Main=（）=>{
const{datas}=useContext（MovieContext）
返回(
{datas.map（（项目，id）=>(
{item.title}{item.vote_average}

{item.title}
))}
);
};
导出默认主；

您可以输入一些代码，以便更容易提供帮助。使用

onClick

-处理程序，您可以将

项

-对象传递到一个状态，该状态将由实际的模态组件使用。由于您没有很好地描述您的问题（您在调用模式时遇到问题吗？），因此很难回答。事实上，我希望显示的模式在单击多个不同id时不会显示相同的数据。