小编Aba*_*aga的帖子

初学者，请帮忙。(1)如果我有一个在codesandbox上或由其他开发人员构建的react项目的文件，我如何在我自己的机器上运行该应用程序并在VSCode中进行更改。(2)如何在我的机器上运行现有的个人create-react-app项目，以便继续构建？

TS新手来了 我在我的 'handleClick' 属性上收到此错误<TailwindButton />：

类型“(e: React.MouseEventHandler) => void”不可分配给类型“MouseEventHandler”。参数“e”和“event”的类型不兼容。类型“MouseEvent<HTMLButtonElement, MouseEvent>”不可分配给类型“MouseEventHandler”。类型“MouseEvent<HTMLButtonElement, MouseEvent>”与签名“(event: MouseEvent<HTMLButtonElement, MouseEvent>): void”不匹配

我正在使用 VSCode，并将鼠标悬停在 onClick 上以获得正确的类型，但我仍然收到错误。我已经尝试使用<Element>而不是按照此处<HTMLButtonElement>建议的类型，但仍然收到错误。请帮忙

TailwindButton.tsx：

import React from 'react'

interface TailwindButtonProps {
    icon: string;
    text: string;
    handleClick: React.MouseEventHandler<HTMLButtonElement>
}

const TailwindButton: React.FC<TailwindButtonProps> = ({ icon, text, handleClick }) => {
    return (
        <button className='bg-primary rounded text-white flex items-center justify-between h-full w-full
            p-2
        '
            type="submit"
            onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => handleClick(e)} 
        >
            <p>{text}</p>
            <p>
                <img src={icon} alt="forward_icon" />
            </p>
        </button>
    ) …

import { lazy, Suspense } from "react";

import { ICustomRoute } from "../types";
import Loader from '../loader'

const LoginPage = lazy(() => import("../pages/auth/login"));
const LoginSuccessPage = lazy(() => import("../pages/auth/login/success"));

export const authRoutes: ICustomRoute[] = [
  {
    path: "/login",
    element: (
      <Suspense fallback={<Loader />}>
        <LoginPage />
      </Suspense>
    ),
    children: [
      {
        path: "welcome",
        element: (
          <Suspense fallback={<Loader />}>
            <LoginSuccessPage />
          </Suspense>
        ),
      },
    ],
  },
];

我只从此文件中导出一件事（authRoutes），但我在 Vite 应用程序中收到此错误

Fast refresh only works when a file only exports components. Move your …

我不断收到“警告：列表中的每个孩子都应该有一个唯一的‘key’道具。” 控制台中出现错误。经过一番检查，我发现需要为每个子元素以及子元素中的每个元素提供一个密钥。我已在地图功能中的网格、链接和卡片组件中添加了键，但错误仍然存​​在。Card 组件的子组件也需要密钥吗？因为我认为我没有足够的唯一密钥。或者我是否将密钥添加到了错误的组件中？请帮忙。

export default function CourseCards() {
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handlePopoverOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handlePopoverClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);

  // COURSE CARDS DATA
  const courseData = [
    {
      title: "Data Science  >",
      description: "Machine Learning bootcamp",
      price: "$236",
      rating: "",
      url: "/",
      img:
        "https://uploads.codesandbox.io/uploads/user/1/skny-12.jpg"
    },
    {
      title: "ApacheBlaBla >",
      description: "Coding and Basics",
      price: "",
      rating: "",
      url: "/",
      img:
        "https://uploads.codesandbox.io/uploads/user/2/e-7V-11.jpg"
    }, …