Question

我试图从一个系列中提取一个儿童元素，但我无法，它似乎找不到这些属性，我知道我接近得到了什么我想要，但我坚持这个。我使用meteor 1.6和React 16

这是我的代码：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Col, Thumbnail, Button, Modal, Row, Form, FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
import { Medicamento } from '../api/medicamento.js';
import PropTypes from 'prop-types';

export default class ListMeds extends Component {
    constructor(props){
        super(props);
    }

    render(){

        function RenderLotes(){
            const lotesArray = this.props.meds.Lotes.map((lista) => 
              // The console indicates Cannot read property 'meds' of undefined
                <div key={lista.codigoLote}>
                    <h3>{lista.codigoLote}</h3>
                </div>
            );
            return(
                <div>{lotesArray}</div>
            );
        }//function RenderLotes ends here
        return(
        <div>
            <Col md={4}>
                    <div align="center"><strong>{this.props.meds.name}</strong></div>
                    <div align="center"><em>{this.props.meds.principio}</em></div>  
            </Col>
    //the two lines above work fine, but crashes when I try to render the function
            <Col md={4}>
                    <div><RenderLotes/></div>
            </Col>
        );
    }
}
ListMeds.propTypes = {
    meds: PropTypes.object.isRequired,
};

Answer 1

RenderLotes中的this与外部render（）函数中的this不同。但是你可能甚至不需要这样的RenderLotes，只需像安德鲁那样制作数组金建议..或者，如果你真的想拥有它，这样的事情应该有效：

function RenderLotes(props) {
    const lotesArray = props.meds.Lotes.map((lista) => 
        <div key={lista.codigoLote}>
            <h3>{lista.codigoLote}</h3>
        </div>
    );
    return(
        <div>{lotesArray}</div>
    );
}

// later:
<div><RenderLotes meds={this.props.meds} /></div>

Answer 2

正如控制台错误所述，this.props函数中未定义RenderLotes()，这表明这是一个范围问题; this中的RenderLotes()并未引用React组件，而是引用其他内容。

一种选择是在RenderLotes()函数之外定义render()函数，将两个函数声明为同一级别：

RenderLotes() {...}
render() {...}

然后，在你的JSX中，用这种方式调用它：

<div>{this.RenderLotes()}</div>

Answer 3

在构造函数中将道具置于状态

export default class ListMeds extends Component {
    constructor(props){
        super(props);
        this.state = {
            meds = props.meds
        }
    }
    render(){
        return (
           {this.state.meds.map(lista => {
               return (
                   <div key={lista.codigoLote}>
                       <h3>{lista.codigoLote}</h3>
                   </div>
               )
           })}
        )
    }

并确保在渲染时你实际上正在传递一个名为meds的道具

ReactDOM.render(<ListMeds meds={meds} />, document.getElementById('root'))

Answer 4

我不完全确定你的问题是什么，但你的代码应该看起来更像是这样：

render(){
  let lotesArray = this.props.meds.Lotes.map((lista) => {
    return(
      <div key={lista.codigoLote}>
        <h3>{lista.codigoLote}</h3>
      </div>
    )
  })
  return (
    <div>
      <Col md={4}>
        <div align="center"><strong>{this.props.meds.name}</strong></div>
        <div align="center"><em>{this.props.meds.principio}</em></div>  
      </Col>

      <Col md={4}>
        <div>{lotesArray}</div>
      </Col>
    </div>
  )
}

Answer 5

首先，如果控制台说meds属性未定义，则意味着它不存在，因此您无法迭代它。第二件事是你如何调用RenderLotes函数。 <div><RenderLotes/></div>这不起作用。相反，您需要将其更改为<div>{this.RenderLotes()}</div>。并将RenderLotes函数声明移出render方法。另外，您不能在div函数中关闭render标记。将代码更改为：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { Col, Thumbnail, Button, Modal, Row, Form, FormGroup, FormControl, ControlLabel } from 'react-bootstrap'
import { Medicamento } from '../api/medicamento.js'
import PropTypes from 'prop-types'

export default class ListMeds extends Component {
    renderLotes = () => this.props.meds.Lotes.map(lista =>
      (<div key={lista.codigoLote}>
        <h3>{lista.codigoLote}</h3>
      </div>))

    render() {
      return (
        <div>
          <Col md={4}>
            <div align="center"><strong>{this.props.meds.name}</strong></div>
            <div align="center"><em>{this.props.meds.principio}</em></div>
          </Col>
          <Col md={4}>
            <div>{!!this.props.meds && this.renderLotes()}</div>
          </Col>
        </div>
      )
    }
}
ListMeds.propTypes = {
  meds: PropTypes.object.isRequired,
}

React：从数组中渲染子元素

5 个答案: