React条件渲染问题求助：space单复数显示逻辑失效

你的条件渲染逻辑语法本身无错误，但大概率是以下原因导致功能异常：

可能的问题点 #

• slots并非数组类型：如果service.slots是null、undefined或非数组值，slots.length会返回undefined，此时undefined == 1不成立，会始终渲染“spaces available”。
• 文本拼接无空格：当前数字与描述文本直接相连，会出现1space available这类不美观的显示效果。
• 松散相等判断的潜在风险：使用==可能因隐式类型转换触发意外情况，建议改用严格相等===。

修复后的代码 #

import React from "react";

const AppointmentService = ({ service }) => {
  // 给slots设置默认空数组，避免非数组类型导致的length读取报错
  const { name, slots = [] } = service;
  return (
    <div>
      <div className="card lg:max-w-lg bg-base-100 shadow-xl">
        <div className="card-body">
          <h2 className="card-title">{name}</h2>
          <p>
            {/* 补充空格，改用严格相等判断逻辑 */}
            {slots.length} {slots.length === 1 ? "space available" : "spaces available"}
          </p>
          <div className="card-actions justify-end">
            <button className="btn btn-primary">Buy Now</button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AppointmentService;

可选优化（处理空 slots 场景） #

如果需要兼容slots长度为0的情况，可以扩展条件逻辑：

<p>
  {slots.length === 0 
    ? "No spaces available" 
    : `${slots.length} ${slots.length === 1 ? "space" : "spaces"} available`}
</p>

内容的提问来源于stack exchange，提问作者Rafsan Ahmed Raj