React中如何将数组传入渲染函数？作用域问题求解

第一步：修复mapSubject函数，让它返回处理后的数组 #

原函数仅在内部生成majorArray但未返回，导致外部无法获取该数组。修改后让函数返回处理好的数组：

const mapSubject = (data) => {
  const majorArray = [];
  data.forEach(item => { // 用forEach更合适，仅需遍历处理数据，无需利用map返回值
    if (item.major1 && !majorArray.includes(item.major1)) {
      majorArray.push(item.major1);
    }
  });
  return majorArray; // 返回处理后的数组，让外部能获取
};

第二步：修复subjectFilter函数，返回渲染的JSX元素数组 #

原函数调用arr.map但未返回结果，导致组件渲染时无内容输出。修改后返回map生成的JSX数组：

const subjectFilter = (arr) => {
  return arr.map((sub, index) => { // 添加index作为唯一key，符合React列表渲染要求
    return (
      <div key={index}>
        <label>{sub}</label>
        <input
          type="checkbox"
          placeholder={sub}
          className="subject"
        />
      </div>
    );
  });
};

第三步：在渲染逻辑中传递数组 #

假设你已有数据源data，先调用mapSubject拿到majorArray，再将其作为参数传入subjectFilter：

// 替换为你的实际数据源
const data = [/* 你的数据项 */];

// 获取处理后的majorArray
const majorArray = mapSubject(data);

return(
  <div>
    {subjectFilter(majorArray)}
  </div>
)

关键修改说明 #

• mapSubject添加return majorArray，突破作用域限制，让外部能获取到处理后的数组。
• subjectFilter返回arr.map结果，确保React能接收到要渲染的JSX元素。
• 给列表项添加key属性，避免React列表渲染警告。

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