TypeError：无法读取未定义的React Js的属性“ map”

Question

我试图通过使用数组将一些数据推送到孙类，我所拥有的是一个ID，摘要，IM使用ID作为键的细节，摘要像标题的数组，并且细节被隐藏，直到您单击摘要。

FAQ.js页面

import React from "react";
import Accordions from '../components/Parts/Accordions';

let AccData = [
   {
     id: 1,
     summary: 'What Loans Do You Provide?',
     details: 'We lend £200 to £3,000 and have repayment terms from 6 
     months, 12 months, 15 months, 18 months or 24 months. You are welcome 
     to apply for a loan of any amount, however your approval will be 
     dependent on credit and affordability checks.',},
  {
     id: 2,
     summary: 'What Loan Terms Do You Offer?',
     details: 'You can borrow between £200 and £400 over a 6 month term. You 
     can borrow between £401 and £850 over a 12 month term. You can borrow 
     between £851 and £1,500 over a 15 month term. You can borrow between 
     £1,501 and £2,000 over a 18 month term, and you can borrow between 
     £2,001 and £3,000 over a 24 month term.'},
  {
     id: 3,
     summary: 'Can I Apply For A Loan?',
     details: 'To be eligible to apply for a loan, you must be at least 18 
     years old, a UK resident and have a UK bank account and debit card. You 
     must also have a net income of at least £700 per month, and be able to 
     comfortably afford the loan repayments.'
  }];

  export default class FAQ extends React.Component {
    render() {

      const hrStyle = {
         lineHeight:"10px",
         margin:"0",
         backgroundColor:"#3ba6f2",
         color:"#3ba6f2",
         border: "solid 2px #3ba6f2",
         width:"100%",
      }

      return (
    <div>
        <div className="container">
            <h1>Frequently Asked Questions</h1>
            <p>&nbsp;</p>
            <h4>The Basics</h4>
            <Accordions AccData={this.props.AccData}/>

        </div>
    </div>
    );
  }
 }

手风琴

import React from 'react';
import Accordion from './Accordion';

export default class Accordions extends React.Component {
    render(){
        return(
            <ul>
                {this.props.AccData.map((summ)=> {
                    return <Accordion summ={summ} key={summ.id} />
                })}
            </ul>
        );
    }
}

手风琴

import React from 'react';

const styles = {
    active: {
        display: 'inherit',
    },
    inactive: {
        display: 'none',
    }
};

export default class Accordion extends React.Component {
    constructor(){
        super();
        this.state = {
            active: false
        };
        this.toggle = this.toggle.bind(this);
    }

    toggle(){
        this.setState({
            active: !this.state.active
        });
    }

    render(){

        const stateStyle = this.state.active ? styles.active : styles.inactive;

        const hand = {
            cursor:"pointer",
        }

        return (
            <li>
                <p onClick={this.toggle} style={hand}>
                    {this.state.active ? "▼" : "►"} {this.props.summ.summary}
                </p>
                <p style={stateStyle}>
                    {this.props.summ.details}
                </p>
            </li>
        )
    }
}

对不起，对于凌乱的代码，我真的真的不知道为什么地图未定义，我遵循了教程，只是重命名了东西

Answer 1

原因是需要将AccData这样发送到子组件。 并且AccData={this.props.AccData}应该是AccData={AccData}

 return (
    <div>
        <div className="container">
            <h1>Frequently Asked Questions</h1>
            <p>&nbsp;</p>
            <h4>The Basics</h4>
            <Accordions AccData={AccData}/>

        </div>
    </div>
    );

Answer 2

在FAQ.js中， AccData只是一个局部变量，不是this.props的成员。

更改

<Accordions AccData={this.props.AccData}/>

...进入

<Accordions AccData={AccData}/>

Answer 3

将代码更改为此：

return (
<div>
    <div className="container">
        <h1>Frequently Asked Questions</h1>
        <p>&nbsp;</p>
        <h4>The Basics</h4>
        <Accordions AccData={AccData}/>

    </div>
</div>
);

您可以在FAQs.js页面中定义AccData ，因此只需正常传递它们即可。 由于您是在课程之外定义的，因此它们将处于作用域内。 你越来越不确定，因为this.props.AccData不存在的FAQs.js文件。 但是，由于您将其作为道具传递下来，因此它将存在于Accordions.js 。