React中遍历作为参数传递的字符串数组失败，求解决方案

你的核心问题是没有正确遍历并渲染responsibilities和qualifications数组：直接将数组传入JSX会让React默认转为逗号分隔的文本，而非预期的列表项；另外你之前写的Array.prototype.map.call代码既没关联实际数据，也没将结果插入渲染结构中。

修复后的Job.js代码 #

function Job(props) {
  const { getCollapseProps, getToggleProps, isExpanded } = useCollapse();
  const { responsibilities, qualifications } = props.details;

  return (
    <li className={'c-job-item c-job-item--permenant'} {...getToggleProps()}>
      <h3 className="c-job-item__title">{props.details.title}</h3>
      <p {...getCollapseProps()} className="c-job-item__summ">{props.details.summary}</p>
      <br />
      
      {/* 渲染职责列表 */}
      <h4>Responsibilities</h4>
      <ul {...getCollapseProps()} className="c-job-item__list">
        {responsibilities.length > 0 && responsibilities[0] !== "" ? (
          responsibilities.map((item, index) => (
            <li key={index}>{item}</li>
          ))
        ) : (
          <li>No responsibilities listed</li>
        )}
      </ul>

      {/* 渲染资质列表 */}
      <h4>Qualifications</h4>
      <ul {...getCollapseProps()} className="c-job-item__list">
        {qualifications.length > 0 && qualifications[0] !== "" ? (
          qualifications.map((item, index) => (
            <li key={index}>{item}</li>
          ))
        ) : (
          <li>No qualifications listed</li>
        )}
      </ul>
    </li>
  );
}

export default Job;

关键修改点 #

• 从props.details中解构出目标数组，简化后续代码
• 使用map()遍历数组生成<li>元素，每个列表项设置唯一key（这里用索引，若元素唯一可直接用元素值）
• 增加空数组/空字符串判断，避免渲染无效内容，优化展示效果
• 将遍历结果放入<ul>内部，符合HTML语义化规范

额外提示 #

你的示例JSON存在重复的job-2键，会导致后一个job-2覆盖前一个，建议修正JSON结构。

内容的提问来源于stack exchange，提问作者M. Dave