Javascript ReactJS-I can'；t通过子组件的正确路径

我有一个为子组件传递道具的组件：

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

在上面的组件中，控制台上有一条错误消息：

TypeError:无法读取未定义的属性“interiorsUrl”

它指向此代码行：

 const URL = this.props.interiorsUrl;

---

我做错了什么？谢谢。

您需要从组件内部调用this.props.interiorsure

所以在任何地方，而不是课后{}

例如：

---

这样地？componentDidMount（）{const URL=this.props.interiorsUrl；axios.get（URL）我注意到当我进行此更改时，组件加载图像的速度变慢了。是否还有其他更好的地方插入此行？应该没有太大区别（无论如何都不明显）但您可以尝试在构造函数中执行此操作。这将在componentDidMount之前触发，但不建议在那里执行此操作-@claudiobitar如果您使用axios仅加载带有GET请求的图像，则只需将其设置为标记的src属性应该会更快

 const URL = this.props.interiorsUrl;

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

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