TypeError：無法讀取未定義React Js的屬性'映射'

Question

我試圖推動一些數據通過使用一個數組到孫子類， 我有一個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> 
    ); 
    } 
} 

Accordions.js

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

Accordion.js

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

你的代碼改成這樣：

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所以只是通過他們的正常進行。由於您在課堂外定義了它們，因此它們將在範圍內。由於您的FAQs.js文件中不存在this.props.AccData，因此您的界面不明確。但是，它會存在於Accordions.js中，因爲您將它作爲道具傳遞給它。

Answer 3

在你的FAQ.js中，AccData只是一個局部變量，它不是this.props的記憶。

變化

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

...到

<Accordions AccData={AccData}/>