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？＆＃34;▼＆＃34; ：＆＃34;►＆＃34;} {this.props.awu.summary}即使我通过{this.state.active？＆＃34;▼＆＃34; ：＆＃34;►＆＃34;} {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。请参阅代码中的注释。

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将会details，并且您正在访问undefined的值summary，这就是为什么要抛出错误。访问basics undefined的值props时也会与第二位相同（<{1}}）。

解决方案：

1。从两个地方传递baiscs.summary中的所有值。

2。或者在使用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 ? {this.state.active ? "▼" : "►"} {basics.summary} :null} {basics && basics.details} {awu ? {this.state.active ? "▼" : "►"} {awu.summary} :null} {awu && awu.details} </li> ) }之前设置条件。

检查一下：

"...has created {{param1}} ({{param2}}) on {{ param3 }}, {{ param4}}"

TypeError：无法读取属性＆＃39;摘要＆＃39;未定义的React Js

2 个答案: