Question

在我的react应用程序中，我将数据作为道具从父母传递给孩子。在我的子组件中，我能够在props中看到数据，但是当我尝试访问数据时，出现一个错误，提示“无法读取未定义的属性”。

我已经像下面这样写了我的孩子组件-

子组件-

import React from 'react';
import ReactDOM from 'react-dom';
import { setData } from '../actions/action'
import { connect } from 'react-redux'

import {
    Accordion,
    AccordionItem,
    AccordionItemTitle,
    AccordionItemBody,
} from 'react-accessible-accordion';


import 'react-accessible-accordion/dist/fancy-example.css';
import 'react-accessible-accordion/dist/minimal-example.css';

const ChildAccordion = (props) => {
    console.log(props);

    return (
        <Accordion>
            <AccordionItem>
                <AccordionItemTitle>
                <h3> Details: 
               { props?
                    props.map(d =>{
                        return <span>{d.key}</span>
                    })
                    :
                    ""
               }

                </h3>
                    <div>With a bit of description</div>
                </AccordionItemTitle>
                <AccordionItemBody>
                    <p>Body content</p>
                </AccordionItemBody>
            </AccordionItem>
        </Accordion>
    )
};



export default  ChildAccordion

父组件-

import React from 'react';
import ReactDOM from 'react-dom';
import ChildAccordion from './ChildAccordion'
import { setData } from '../actions/action'
import { connect } from 'react-redux'

import {
    Accordion,
    AccordionItem,
    AccordionItemTitle,
    AccordionItemBody,
} from 'react-accessible-accordion';


import 'react-accessible-accordion/dist/fancy-example.css';
import 'react-accessible-accordion/dist/minimal-example.css';


class ParentAccordion extends React.Component {

    componentWillMount() {
      //call to action
      this.props.setData();
  }

  getMappedData = (dataProp) =>{
      if (dataProp) { 
        let Data = this.props.dataProp.map(d =>{
            console.log(d);
        })
      }
  }


    render(){
        const { dataProp } = this.props;
        return (
            // RENDER THE COMPONENT
                <Accordion>
        <AccordionItem>
            <AccordionItemTitle>
                <h3>Policy Owner Details: 
               { dataProp?
                    dataProp.map(d =>{
                        return <span>{d.key1}</span>
                    })
                    :
                    ""
               }

                </h3>
            </AccordionItemTitle>
            <AccordionItemBody>
            <ChildAccordion {...dataProp} />
            </AccordionItemBody>
        </AccordionItem>
    </Accordion>
        );
    }
}


const mapStateToProps = state => {
    return {
        dataProp: state.dataProp
    }
};

const mapDispatchToProps = dispatch => ({
  setData(data) {
    dispatch(setData(data));
  }
})
export default connect (mapStateToProps,mapDispatchToProps) (ParentAccordion)

我在内部使用map函数，因为我的api响应可以是多个对象的数组。

Answer 1

一旦知道要传递的prop叫什么，就可以从子组件{props.data.map(item => <span>{item.something}</span>}

中访问它。

const Parent = () => {
  return (
     <Child data={[{ id: 1, name: 'Jim' }, { id: 2, name: 'Jane ' }]} />
  );
}

const Child = (props) => {
  return (
    <ul>
      {props.data.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

Answer 2

您正在将dataProp作为道具传递给ChilAccordian。因此，在Child组件中，您应该使用props.dataProp访问它，并在props.dataProp上进行映射，但不能直接在props上映射

ChildAccordian：

  <h3> Details: 
           { Array.isArray(props.dataProp) && props.dataProp.length > 0 ?
                props.dataProp.map(d =>{
                    return <span key={d.id}>{d.key}</span>
                })
                :
                ""
           }

            </h3>

还请记住，在像for循环，.map，.forEach，Object.keys，OBject.entries，Object.values这样的循环中生成它们时，必须为父Jsx元素添加唯一键。上面的例子。如果您没有从数据中获得唯一ID，请考虑将索引添加为唯一ID，例如

      <h3> Details: 
           { Array.isArray(props.dataProp) && props.dataProp.length > 0 ?
                props.dataProp.map((d, index) =>{
                    return <span key={"Key-"+index}>{d.key}</span>
                })
                :
                ""
           }

            </h3>

编辑：如果是对象，请执行以下操作，并考虑使用一种方法来生成jsx元素

getMappedData = dataProp =>{
   if(props.dataProp){
            Object.keys(props.dataProp).map(key =>{
               return <span key={"Key-"+key}>{props.dataProp[key]}</span>
            });
   }else{
       return "";
    }
  }

   <h3> Details: 
          {this.getMappedData(props.dataProp)} 
   </h3>

React JS-如何访问从父组件传递的子组件中的道具

2 个答案: