如何获取数据并将其显示在孙子组件中答案

【问题标题】：How to fetch data and display it in grandchild component如何获取数据并将其显示在孙子组件中
【发布时间】：2021-11-14 21:42:54
【问题描述】：

我有一个父组件，在这里我获取数据：

import React, { useEffect, useState } from "react";
import BoxWithSearch from "../components/sub-components/BoxWithSearch";
import { useDispatch, useSelector } from "react-redux";
import { listCompanies } from "../actions/companyActions";

export default function HomeScreen() {
  const dispatch = useDispatch();

  const companyList = useSelector((state) => state.companyList);
  const { companies } = companyList;

  useEffect(() => {
    dispatch(listCompanies());
  }, [dispatch]);

  return (
    <div className="container">
      <div className="row">
        <div className="col-lg-3 col-md-12 col-sm-12 col-xs-12">
          <h3 className="title">Brands</h3>
              <BoxWithSearch type={"companies"} companies={companies} 
        </div>
        
      </div>
    </div>
  );
}

所以公司是这样来的： [

  {
    "slug": "Dickens-Franecki",
    "name": "Dickens - Franecki",
    "address": "12158 Randall Port",
    "city": "East Maureenbury",
    "state": "NE",
    "zip": "74529",
    "account": 31010023,
    "contact": "Lonzo Stracke"
  },
  {
    "slug": "Weissnat-Schowalter-and-Koelpin",
    "name": "Weissnat, Schowalter and Koelpin",
    "address": "92027 Murphy Cove",
    "city": "Port Malachi",
    "state": "WY",
    "zip": "56670-0684",
    "account": 81813543,
    "contact": "Kathryne Ernser"
  },
]

我试图将这些公司显示为复选框，但 HomeScreen 的子组件是 BoxWithSearch 组件：

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">
        {this.props && this.props.map((prop) => <CheckBox text={prop.name} />)}
      </div>
    </div>
  );
}

然后它转到复选框：

import React from "react";

export default function CheckBox(props) {
  const [isChecked, setChecked] = React.useState(false);

  const toggleCheck = (e) => {
    setChecked(e.target.checked || !isChecked);
  };
  return (
    <>
      <label className="checkbox-container">
        {props.text}
        <input
          type="checkbox"
          checked={isChecked}
          onChange={(e) => toggleCheck(e)}
          id={props.id}
        />
        <span className="checkmark"></span>
      </label>
    </>
  );
}

但不幸的是，我遇到了 Uncaught TypeError: Cannot read properties of undefined (reading 'props')，我真的很困惑，不知道该怎么办。

你能看一下吗？谢谢...

【问题讨论】：

根据您的代码，您将一个对象传递给BoxWithSearch（一家公司），因此您无法映射任何内容，它不是一个数组。而且您将单个字符串传递给CheckBox，公司名称为text，因此您不会找到类似props.id的东西
我编辑了代码，现在我这样发送：但我仍然收到 × TypeError: Cannot read properties of undefined (阅读“道具”）

标签： reactjs react-redux react-props react-component

【解决方案1】：

由于您要传递这样的道具：<BoxWithSearch type={"companies"} companies={companies} />，您应该期望在您的BoxWithSearch 组件中有一个props 对象，其属性为type 和companies。因此，在BoxWithSearch 中，您可以像这样映射公司属性：

props.companies.map((prop) => <CheckBox text={prop.name} />

请注意，这里您只是将text 属性传递给CheckBox，但在您的代码中您也在寻找id。所以我想你应该有这样的东西：

props.companies.map((prop) => <CheckBox text={prop.name} id={prop.id} />

【讨论】：