>

자식 구성 요소에 대한 소품을 전달하는이 구성 요소가 있습니다 :

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'    
import PortfolioPage from './PortfolioPage'  
class PortfolioMenu extends Component {
  constructor(props) {
    super(props)
    // here is the prop to be passed for a child component
    this.state = {       
      interiorsUrl: "http://localhost:3001/interiors"
    }
  }
  render() {    
    return (
      <div>
        <Router>
          <div class="wrapper2">
            <div class="wrapper-portfolio">
              // here is the line to pass the prop
              <Route exact path='/portfolio/interiores' render={() => <PortfolioPage interiorsUrl={this.state.interiorsUrl}/>} />
            <nav>
              <ul>   
                <li><NavLink activeClassName="active" exact to="/portfolio/interiores">• interiores</NavLink></li>                  
              </ul>
            </nav>
          </div>
        </Router>
      </div>
    )
  }
}

export default PortfolioMenu

소품을받는 하위 구성 요소는 다음과 같습니다.

import React, { Component } from 'react'
import axios from 'axios'
import Modal from 'react-responsive-modal';
import Lightbox from 'react-lightbox-component';

const URL = this.props.interiorsUrl;

class PortfolioPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      result: []
    }
  }
  componentDidMount() {
    axios.get(URL)
//...rest of the code omitted

위의 컴포넌트에서 콘솔에 오류 메시지가 있습니다 :

TypeError: Cannot read property 'interiorsUrl' of undefined

이 코드 라인을 가리 킵니다 :

const URL = this.props.interiorsUrl;

무엇이 잘못 되었나요? 감사합니다.


  • 답변 # 1

    컴포넌트 내부에서 this.props.interiorsUrl을 호출해야합니다.

    따라서 어디에서나 {} 수업 후

    예 :

    componentDidMount() {
        axios.get(this.props.interiorsUrl)
    }
    
    

  • 답변 # 2

    class PortfolioPage extends Component {
      constructor(props) {
        super(props);
        this.state = {
          result: []
        }
      }
      componentDidMount() {
        const { interiorsUrl } = this.props;
        axios.get(interiorsUrl)
          .then(response => this.setState({ result: response.data }))
          .catch(e => console.error(e));
      }
      //...rest of the code omitted
    
    

관련 자료

  • 이전 python - 동적 dags의 on_failure_callback
  • 다음 c# - TimetimeScale은 레티클 UNITY를 사용하여 UI 기능을 중지합니다