props 已传递，但在映射时未定义答案

【问题标题】：props are passed but are undefined when they are mappedprops 已传递，但在映射时未定义
【发布时间】：2021-05-30 12:49:50
【问题描述】：

当我直接映射数组时，我不会遇到任何错误，但是如果我通过道具传递相同的数组，我会遇到“无法读取未定义的属性'map'”的错误

品牌数组

const brands = [
  {
    key: 1,
    Name: "Nike",
  },
  {
    key: 2,
    Name: "Adidas",
  },
  {
    key: 3,
    Name: "Apollo",
  },
  {
    key: 4,
    Name: "Puma",
  },
];

export default brands;

父组件

import React from "react";
import { Button, Checkbox } from "@material-ui/core";
import SimpleAccordion from "./simpleAccordion";
import "./Sidebar.css";
import brands from "./BrandNames";

function App() {
  console.log("I am in App component", brands);

  return (
    <React.Fragment>
      <div className="sidenav">
        <SimpleAccordion children="Categories" brands={brands} /> // here passing the props as brands
        <hr style={{ color: "#999999" }} />

        {/* <h1>Helooooooo</h1>
        {brands.forEach((brand) => {
          return <span>{brand.Name}</span>;
        })} */}

        {brands.map((brand, key) => {
          return (
            <div>
              <h1>{brand.Name}</h1>
              <h1>{brand.key}</h1>
            </div>
          );
        })}

        <h1>Helooooooo</h1>
   <SimpleAccordion children="Brands" />
        <hr style={{ color: "#999999" }} />
        <SimpleAccordion children="Stores" />
        <hr style={{ color: "#999999" }} />
        <SimpleAccordion children="Price" />
  
      </div>
    </React.Fragment>
  );
}

export default App;

子组件

import React,{useState} from 'react';
import Accordion from '@material-ui/core/Accordion';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import Typography from '@material-ui/core/Typography';
 import AddIcon from '@material-ui/icons/Add';
 import CloseIcon from '@material-ui/icons/Close';
 import {Checkbox} from '@material-ui/core';
 import brands from './BrandNames';


export default function SimpleAccordion(props) {
    
   const[iconName,setIcon]= useState(false);
  
   function handleClick(){
     setIcon(!iconName);
   }

// shows data at first time but then becomes undefine 
console.log("here", props.brands)  
  


    return (
      <React.Fragment>

// Directly mapping the  (imported)"brands" array, no error
          {brands.map((brand, key) => {
          return (
            <div>
              <h1>{brand.Name}</h1>
              <h1>{brand.key}</h1>
            </div>
          );
        })}
        
// mapping props.brands array and there are errors.
          {props.brands.map((brand, key) => {
          return (
            <div>
              <h1>{brand.Name}</h1>
              <h1>{brand.key}</h1>
            </div>
          );
        })}

        <Accordion style={{boxShadow:"0px 0px 0px "}} >
          <AccordionSummary expandIcon={iconName ? <CloseIcon /> : <AddIcon/>} onClick={handleClick}>
            <Typography style={{color:"#333333",fontWeight:"bolder"}}>{props.children}</Typography >
          </AccordionSummary>
          <AccordionDetails >
            <Typography>

            </Typography>
          </AccordionDetails>
          </Accordion>
         
          </React.Fragment>
    
  );
}

如果我不使用子组件中的道具，它可以正常工作。 Brands.map 工作正常，但是当使用 props 时，props.brands 给出错误，即 TypeError: Cannot read property 'map' of undefined。为什么道具给我错误...

【问题讨论】：

你在其他地方使用SimpleAccordion吗？
在 chrome 上使用检查选项来查看品牌道具是否被通过
是的，SimpleAccordion 在父组件中被使用了 4 次。
他们都希望有一个 brands 道具，但你只是把它给了第一个。其余的将尝试映射undefined，如错误所示。
我明白了，我应该把道具也给其他组件！

标签： javascript reactjs react-router material-ui react-props

【解决方案1】：

我渲染了多个SimpleAccordion 组件，但只将道具传递给第一个组件。这就是为什么在映射其他组件时未定义道具的原因。

【讨论】：