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

Question

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

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

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

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

ApplyingWithUs.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 并且仅从父级接收道具，您忘记发送道具basics。见代码中的 cmets。

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

Answer 2

原因是，您从 2 个地方（来自 Accordions.js 和 ApplyingWithUs.js）调用该组件。你从一个地方经过basics，从另一个地方经过awu。因此，当您从第一个位置调用awu 将是undefined 并且您正在访问undefined 的值details 时，这不是抛出错误的原因。在访问 basics 的值 summary 时，第二名也是如此（将是 undefined）。

解决方案：

1. 从这两个地方传递props 中的所有值。

2.或者在使用值baiscs.summary之前加上条件，比如basics && basics.summary。

检查一下：

render(){
    const stateStyle = this.state.active ? styles.active : 
    styles.inactive;

    const hand = {
        cursor:"pointer",
    }

    let {basics, awu} = this.props;

    return (
        <li>
            {basics ?
                <p onClick={this.toggle} style={hand}>
                    {this.state.active ? "▼" : "►"} 
                    {basics.summary}
                </p>
            :null}

            <p style={stateStyle}>
                {basics && basics.details}
            </p>

            {awu ?
                <p onClick={this.toggle} style={hand}>
                    {this.state.active ? "▼" : "►"} 
                    {awu.summary}
                </p>
            :null}

            <p style={stateStyle}>
                {awu && awu.details}
            </p>
        </li>
    )
}