安装react-tinder-card后页面报错，求猫咪交友APP开发帮助

从你的代码和报错情况来看，核心问题是你在TinderCard的onSwipe属性中调用了未定义的swiped函数，这会直接导致页面报错。另外还有几处细节可以优化，以下是具体修复步骤：

1. 定义缺失的swiped函数 #

在组件中补充swiped函数的实现，用来处理滑动后的逻辑，比如更新状态或打印日志：

const swiped = (direction, name) => {
  setLastDirection(direction);
  console.log(`${name} 被向 ${direction} 滑动`);
};

2. 初始化useState的默认值 #

useState建议传入明确的初始值，避免状态为undefined引发潜在问题：

const [lastDirection, setLastDirection] = useState(null);

3. 优化图片路径（可选） #

如果图片放在public/img目录下，使用绝对路径可避免相对路径可能导致的加载异常：

url: '/img/richard.jpg' // 移除路径前的./

完整修复后的代码 #

import TinderCard from 'react-tinder-card';
import { useState } from 'react';

const Dashboard = () => {
    const characters = [
        {
            name: 'Richard Hendricks',
            url: '/img/richard.jpg'
        },
        {
            name: 'Erlich Bachman',
            url: '/img/erlich.jpg'
        },
        {
            name: 'Monica Hall',
            url: '/img/monica.jpg'
        },
        {
            name: 'Jared Dunn',
            url: '/img/jared.jpg'
        },
        {
            name: 'Dinesh Chugtai',
            url: '/img/dinesh.jpg'
        }
    ];
    const [lastDirection, setLastDirection] = useState(null);

    const swiped = (direction, name) => {
        setLastDirection(direction);
        console.log(`${name} 被向 ${direction} 滑动`);
    };

    const outOfFrame = (name) => {
        console.log(name + ' 移出屏幕！');
    };

    return (
        <div className="dashboard">
            <div className="swiper-container">
                <div className="card-container">
                    {characters.map((character) => (
                        <TinderCard
                            className='swipe'
                            key={character.name}
                            onSwipe={(dir) => swiped(dir, character.name)}
                            onCardLeftScreen={() => outOfFrame(character.name)}
                        >
                            <div
                                style={{ backgroundImage: `url(${character.url})` }}
                                className='card'
                            >
                                <h3>{character.name}</h3>
                            </div>
                        </TinderCard>
                    ))}
                </div>
            </div>
        </div>
    );
};

export default Dashboard;

额外排查点 #

• 确认react-tinder-card已正确安装：执行npm list react-tinder-card检查版本，未安装则运行npm install react-tinder-card
• 检查CSS样式是否正确引入，确保卡片和滑动容器有合适的宽高、定位样式，否则可能影响交互效果

内容的提问来源于stack exchange，提问作者AmineT