Question

我试图通过使用数组向孙子类推送一些数据，我所拥有的是一个id，摘要，详细信息的数组，我使用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

在您的FAQ.js中，import coremltools coreml_model = coremltools.converters.caffe.convert(('mymodel.caffemodel', 'deploy.prototxt'), image_input_names = "data", is_bgr = True, class_labels='labels.txt' ) coreml_model.save('MyModel.mlmodel')只是一个本地变量，它不是AccData的成员。

更改

this.props

...进入

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

Answer 3

将您的代码更改为：

return (
<div>
    <div className="container">
        <h1>Frequently Asked Questions</h1>
        <p>&nbsp;</p>
        <h4>The Basics</h4>
        <Accordions AccData={AccData}/>

    </div>
</div>
);

您可以在AccData页面中定义FAQs.js，以便正常传递它们。因为你在课堂之外定义它们，所以它们将在范围内。您未定义，因为this.props.AccData文件中不存在FAQs.js。然而，它会存在于Accordions.js中，因为你将它作为道具传递下来。

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

3 个答案: