ReactJS中使用filter方法遭遇语法解析错误，请求协助排查

你的代码出现语法解析错误的核心原因是：调用filter过滤数组后，直接尝试返回JSX元素，缺少了map方法来遍历过滤后的数组生成React元素。此外还有几处语法和变量定义问题，以下是具体修正方案：

错误点分析 #

• filter方法仅负责筛选数组元素、返回新数组，无法直接生成JSX。必须通过map遍历过滤后的数组，逐个返回组件元素。
• 代码中使用的jPenumpang、tDriver、formdate、date变量未定义/未从props传入，会导致后续运行时错误。
• filter回调内的括号冗余，可简化写法。

修正后的代码 #

function ListMobil({ submit, data, penumpang: jPenumpang, tipeDriver: tDriver, tanggal, waktu }) {
    // 根据传入的日期时间生成对比用时间戳（可根据业务逻辑调整）
    const formdate = new Date(`${tanggal} ${waktu}`).getTime();
    // 日期格式化工具函数示例（替换原代码中未定义的date函数）
    const formatDate = (dateStr) => new Date(dateStr);

    return (
        <div>
            <Navbar />
            <Hero />
            <Search />
            <div className="container mt-4">
                <div className="row">
                    {getListMobilResult ? (
                        getListMobilResult
                            .filter((mobil) => 
                                mobil.capacity >= jPenumpang &&
                                mobil.driver === tDriver &&
                                formatDate(mobil.availableAt).getTime() > formdate
                            )
                            .map((mobil) => (
                                <div className="col-md-4" key={mobil.id}>
                                    <div className="card mb-3">
                                        <img 
                                            src={`https://raw.githubusercontent.com/fnurhidayat/probable-garbanzo/main/public/images/${mobil.image.split('/')[2]}`} 
                                            className='card-img-top' 
                                            style={{ height: "300px", minWidth: "300px" }} 
                                            alt={mobil.manufacture}
                                        />
                                        <div className="card-body">
                                            <p className="card-text mb-2">
                                                {mobil.type} {mobil.model}
                                            </p>
                                            <h5 className="card-title mb-2">
                                                Rp{mobil.rentPerDay} / Hari
                                            </h5>
                                            <p className="card-text mb-2">{mobil.description}</p>
                                            <p className="card-text mb-2 "><FontAwesomeIcon icon={faUserGroup} /> {mobil.capacity}</p>
                                            <p className="card-text mb-2 "><FontAwesomeIcon icon={faGear} /> {mobil.transmission}</p>
                                            <p className="card-text mb-2 "><FontAwesomeIcon icon={faCalendar} /> {mobil.year}</p>
                                        </div>
                                    </div>
                                </div>
                            ))
                    ) : getListMobilLoading ? (
                        <p>Loading ...</p>
                    ) : (
                        <p>{getListMobilError ? getListMobilError : "Data Kosong"}</p>
                    )}
                </div>
            </div>
            <Footer />
        </div>
    );
}

export default ListMobil;

关键修正说明 #

1. 添加map方法：在filter之后链式调用map，遍历过滤后的数组生成对应的JSX卡片元素，解决语法解析错误。
2. 变量补全：
   • 通过props解构重命名，将传入的penumpang改为jPenumpang、tipeDriver改为tDriver，匹配原代码变量名。
   • 补充formdate和日期格式化函数的定义（可根据实际业务逻辑调整）。
3. 语法优化：简化filter回调内的条件判断写法，去掉冗余括号；将==改为===，符合JS最佳实践。

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