Javascript TypeError:无法读取属性'；地图'；未定义React Js的定义_Javascript_Html_Css_Reactjs_Jsx

Javascript TypeError:无法读取属性'；地图'；未定义React Js的定义

javascript html css reactjs

Javascript TypeError:无法读取属性'；地图'；未定义React Js的定义,javascript,html,css,reactjs,jsx,Javascript,Html,Css,Reactjs,Jsx,我试图通过使用数组将一些数据推送到孙子类，我拥有的是一个id数组，summary，details，我使用id作为键，summary就像一个标题，在单击summary之前，细节是隐藏的常见问题解答.js页面 import React from "react"; import Accordions from '../components/Parts/Accordions'; let AccData = [ { id: 1, summary: 'What Loans D

我试图通过使用数组将一些数据推送到孙子类，我拥有的是一个id数组，summary，details，我使用id作为键，summary就像一个标题，在单击summary之前，细节是隐藏的

常见问题解答.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>
    );
  }
 }

从“React”导入React；
从“../components/Parts/Accordions”导入手风琴；
设AccData=[
{
id:1，
总结：“你们提供哪些贷款？”，
详细信息：“我们贷款200至3000英镑，还款期限为6年
月、12个月、15个月、18个月或24个月。欢迎您
申请任何金额的贷款，但您的批准将被取消
依赖于信用和可承受性检查。”，}，
{
id:2，
总结：“你们提供什么贷款条件？”，
详细信息：“您可以在6个月期限内借款200至400英镑。您可以
在12个月的期限内，你可以借401英镑到850英镑。你可以
在15个月期限内，851英镑至1500英镑之间。您可以在
1501英镑和2000英镑，期限为18个月，您可以在
2001英镑和3000英镑，为期24个月，
{
id:3，
总结：“我可以申请贷款吗？”，
详细信息：“要有资格申请贷款，您必须年满18岁
岁，英国居民，拥有英国银行账户和借记卡
还必须每月净收入至少700英镑，并且能够
能够轻松地偿还贷款。”
}];
导出默认类FAQ扩展React.Component{
render（）{
常数hrStyle={
线宽：“10px”，
边距：“0”，
背景色：“3ba6f2”，
颜色：“3ba6f2”，
边框：“实心2px#3ba6f2”，
宽度：“100%”，
}
返回(
常见问题

基础知识
);
}
}

手风琴

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>
        );
    }
}

从“React”导入React；
从“./Accordion”导入手风琴；
导出默认类accordios扩展React.Component{
render（）{
返回(

{this.props.AccData.map（（summ）=>{
返回
})}

);
}
}

手风琴

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>
        )
    }
}

从“React”导入React；
常量样式={
活动：{
显示：“继承”，
},
非活动：{
显示：“无”，
}
};
导出默认类Accordion.Component{
构造函数（）{
超级（）；
此.state={
活动：错误
};
this.toggle=this.toggle.bind（this）；
}
切换（）{
这是我的国家({
活动：！this.state.active
});
}
render（）{
const stateStyle=this.state.active？styles.active:styles.inactive；
常数手={
光标：“指针”，
}
返回(


{this.state.active？“▼" : "►"} {this.props.summary.summary}


{this.props.summ.details}


)
}
}

抱歉，代码太乱了，我真的不知道为什么地图没有定义，我遵循了一个教程，只是重命名了一些东西

原因是

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>
    );

返回(
常见问题

基础知识
);

原因是

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>
    );

返回(
常见问题

基础知识
);

将代码更改为：

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

中，因为您是p将其作为道具使用。

将代码更改为：

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

中，因为您是p将其视为一个道具。

在您的FAQ.js中，

AccData

只是一个局部变量，它不是

这个.props的成员
改变
<Accordions AccData={this.props.AccData}/>



…进入
<Accordions AccData={AccData}/>

在FAQ.js中，AccData
只是一个局部变量，它不是这个.props的成员
改变
<Accordions AccData={this.props.AccData}/>



…进入
<Accordions AccData={AccData}/>


立即在渲染内部：console.log（this.props.AccData）；
映射未定义，因为从未分配过AccData。@mkaatman如何分配它，然后我对立即在渲染内部作出反应相当陌生：console.log（this.props.AccData）；
map未定义，因为AccData从未分配。@mkaatman我如何分配它，然后我对它相当陌生react@andywilson如果这解决了问题-将其标记为答案；）@andywilson如果这解决了问题-将其标记为答案；）