React 添加带有复选框的收藏夹

Question

对象 收藏 我正在尝试做一个有反应的网站，我使用 API 来接收数据。我收到的数据被放入一个列表中，然后我为该列表中的每个项目生成一个按钮。现在我还为列表中的每个项目生成一个复选框，但生成是在单独的组件中。我想要做的是，如果选中一个项目的复选框，则该项目应存储在缓存中，并作为单独页面上的按钮再次显示。我现在的问题是我该怎么做？

先感谢您。

这是我生成复选框的地方：

import React from "react";
export default function Favcheck() {
  
  
  return (
    <>
         <div class="favcheck">
           Favorit
           <input type="checkbox" name="name"  class="checkbox" id="heart" />
          </div>
      
    </>
  );
}

这是制作按钮的地方：

import axios from "axios";
import * as React from "react";
import Favcheck from "./favcheck.jsx";
import Mensapage from "./mensapage.jsx";
import site from "./home.jsx";

export default function Mensbuttons(props) {
  
  return (
    <>
      
      <div class="formcontainer">
        <form method="get" action="/mensapage" id="mensaform">
          <button  type="submit" class="mensabutton" key={props.key}>
            <div class="mensatext">{props.name}</div>
          </button>
          <br></br>
          <Favcheck />
        </form>
      </div>
     
    </>
  );
}

这是使用按钮的地方：

import  React,{ useState, useEffect } from "react";
import axios from 'axios';

import Nav from "./nav.jsx";

import Mensbuttons from "./mensbuttons.jsx";


export default function Home(props) {
 
 let site="test";
  
 const[posts,setPosts] = useState([])
  useEffect(()=>{
    axios.get('https://openmensa.org/api/v2/canteens?near[lat]=52.517037&near[lng]=13.38886&near[dist]=15')
    .then(res =>{
     
      setPosts(res.data)
    })
    .catch(err =>{
      console.log(err)
    })
  },[])
   console.log(posts);
  
    
  return (
    <>
    
      <Nav />
      <div class="header">
        <h1>Mensen</h1>
        
      </div>
      {posts.map((list) => {
        return <Mensbuttons name={list.name} key={list.id} />;
      })}
    </>
  );
}

Answer 1

这是一些模型图片
我想通过选中复选框

这是收藏夹
这是带有复选框的按钮