javascript - 类型错误 : Cannot read property 'summary' of undefined React Js

Question

我的 reactjs 代码有问题，我试图将一些 Prop 从数组传递到类，但它给了我一个未定义的错误。

常见问题解答.js

import React from "react";
import Accordions from '../components/Parts/Accordions';
import ApplyingWithUs from '../components/Parts/ApplyingWithUs';
...
export default class FAQ extends React.Component {
   render() {
        ...
return (
    <div>
        <div className="container">
            <h1>Frequently Asked Questions</h1>
            <p>&nbsp;</p>
            <h4>The Basics</h4>
            <Accordions TheBasics={TheBasics}/>
            <h4>Appling With Us</h4>
            <ApplyingWithUs ApplyingWithUsDetails={ApplyingWithUsDetails}/>
        </div>
    </div>
   );
 }
}

我已经删除了数组，因为它们很长并且不会导致问题

Accordion .js

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

export default class Accordions extends React.Component {
    render(){
        return(
            <ul style={{listStyleType:"none"}}>
                {this.props.TheBasics.map((basics)=> {
                    return <Accordion basics={basics} key={basics.id} />
                })}
            </ul>
        );
    }
}

Accordion.js 说错误在 {this.state.active ? “▼”:“►”} {this.props.awu.summary} 即使我通过与 {this.state.active 相同的方式传递所有内容？ "▼": "►"} {this.props.basics.summary} 只是不同的名称导致它从不同的数组中提取数据

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.basics.summary}
                </p>
                <p style={stateStyle}>
                    {this.props.basics.details}
                </p>
                <p onClick={this.toggle} style={hand}>
                     {this.state.active ? "▼" : "►"} 
                     {this.props.awu.summary}
                </p>
                <p style={stateStyle}>
                     {this.props.awu.details}
                </p>
            </li>
         )
     }
 }

ApplyWithUs.js

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

export default class ApplyingWithUs extends React.Component {
    render(){
        return(
            <ul style={{listStyleType:"none"}}>
                {this.props.ApplyingWithUsDetails.map((awu)=> {
                    return <Accordion awu={awu} key={awu.id} />
                })}
            </ul>
         );
     }
 }

请帮助我。

Answer 1

如果 Accordion 未连接到 Redux 并且仅从父级接收 props，则您忘记发送 prop basics。请参阅代码中的注释。

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

export default class ApplyingWithUs extends React.Component {
    render(){
        return(
            <ul style={{listStyleType:"none"}}>
                {this.props.ApplyingWithUsDetails.map((awu)=> {
                    return <Accordion awu={awu} key={awu.id} /* here must be basics={something} *//>
                })}
            </ul>
         );
     }
 }

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.basics.summary} // or you can't use this prop
                </p>
                <p style={stateStyle}>
                    {this.props.basics.details}
                </p>
                <p onClick={this.toggle} style={hand}>
                     {this.state.active ? "▼" : "►"} 
                     {this.props.awu.summary}
                </p>
                <p style={stateStyle}>
                     {this.props.awu.details}
                </p>
            </li>
         )
     }
 }