React JobsListing组件描述截断与Read More功能失效问题排查

你的代码有两个核心问题导致功能不生效：

1. 错误的字符串截取方法 #

JavaScript 字符串没有 setstring() 方法，这会直接抛出运行时错误。要截取前90个字符，应该使用 slice(0, 90) 或者 substring(0, 90)。

2. 点击逻辑错误 #

原代码中的「Read More」是 <a> 标签，点击会直接跳转到职位详情页，根本不会触发展开描述的状态切换。需要添加状态切换的逻辑，同时控制跳转行为。

修复后的完整代码 #

import { useState } from "react";

const JobsListing = ({ job }) => {
  const [showFullDescription, setShowFullDescription] = useState(false);

  // 处理描述文本的截取逻辑
  const getDisplayDescription = () => {
    if (!job.description) return "";
    if (showFullDescription) return job.description;
    // 只在文本长度超过90时添加省略号
    return job.description.length > 90 
      ? `${job.description.slice(0, 90)}...` 
      : job.description;
  };

  // 切换展开/收起状态，控制跳转行为
  const handleReadMore = (e) => {
    if (showFullDescription) return; // 已展开则允许跳转
    e.preventDefault(); // 未展开时阻止跳转，切换状态
    setShowFullDescription(true);
  };

  return (
    <div>
      <div className="bg-white rounded-xl shadow-md relative">
        <div className="p-4">
          <div className="mb-6">
            <div className="text-gray-600 my-2">{job.type}</div>
            <h3 className="text-xl font-bold">{job.title}</h3>
          </div>

          <div className="mb-5">{getDisplayDescription()}</div>

          <h3 className="text-indigo-500 mb-2">{job.salary}</h3>

          <div className="border border-gray-100 mb-5"></div>

          <div className="flex flex-col lg:flex-row justify-between mb-4">
            <div className="text-orange-700 mb-3">
              <i className="fa-solid fa-location-dot text-lg"></i>
              {job.location}
            </div>
            <a
              href={`/job/${job.id}`}
              onClick={handleReadMore}
              className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
            >
              {showFullDescription ? "View Job Details" : "Read More"}
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};

export default JobsListing;

关键修改说明 #

• 用 slice(0, 90) 替代不存在的 setstring()，同时添加长度判断，避免短文本显示多余的省略号
• 添加 handleReadMore 方法，第一次点击切换展开状态，第二次点击才跳转到详情页
• 按钮文本根据状态动态切换，优化用户体验

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