React父组件获取数据传递到孙组件渲染为复选框，props报错如何解决？

错误根因 #

报错来源于3处核心问题，按优先级排序：

1. 函数组件错误使用this访问props：BoxWithSearch是React函数组件，不存在this上下文，所以this.props直接触发undefined读取错误
2. 错误遍历对象而非数组：你直接尝试遍历props对象，而需要遍历的是父组件传入的companies数组属性
3. 额外语法错误：父组件HomeScreen里的BoxWithSearch标签未闭合，会触发编译错误

分步修复代码 #

1. 修复父组件HomeScreen的标签闭合问题 #

将render里的BoxWithSearch标签补全闭合：

<BoxWithSearch type={"companies"} companies={companies} />

2. 修复BoxWithSearch组件的渲染逻辑 #

去掉this，改为直接读取参数props里的companies属性，同时增加空值判断避免异步加载未完成时的报错：

import React from "react";
import CheckBox from "../custom-components/CheckBox";

export default function BoxWithSearch(props) {
  return (
    <div className="search-w-box card">
      <div className="card-header">
        <input
          type="text"
          className="form-control"
          placeholder={`Search ${props.type}`}
          aria-label="Recipient's username"
        ></input>
      </div>
      <div className="card-body">
        {/* 先判断companies存在再遍历，添加唯一key避免React列表警告 */}
        {props.companies?.map((company) => <CheckBox text={company.name} key={company.slug} />)}
      </div>
    </div>
  );
}

3. 可选优化：CheckBox组件的toggle逻辑简化 #

现有toggle逻辑存在冗余，可直接取input的checked属性赋值：

const toggleCheck = (e) => {
  setChecked(e.target.checked);
};

修复后运行逻辑说明 #

• 父组件挂载后触发dispatch拉取公司列表，拿到数据后通过props传递给BoxWithSearch
• BoxWithSearch接收到companies数组后遍历渲染CheckBox组件，数据未加载完成时不会触发遍历
• 每个CheckBox独立维护选中状态，不会互相干扰

内容的提问来源于stack exchange，提问作者Yellow rain coat