尽管控制台显示在类访问中定义，但在访问时未定义道具

Question

我正在上课，我必须建立一个网站（我是前端的新手！），但我的教授和 TA 无法帮助我解决这个问题（React 组件，JavaScript）。

• 当我传入 变量作为道具 <Stock ticker={stock.ticker}/> 时，该变量在控制台上显示为 prop，但是当我尝试访问它时，它变得未定义。
• Passing in variable as a prop: First output is console.log(this);, Second output is console.log(this.props); right after
• 当我通过时 在 String as a prop <Stock ticker="AMC"/> 中，字符串是 在控制台上显示为道具，我可以访问它。
• Passing in a String as a prop: First output is console.log(this);, Second output is console.log(this.props); right after

一个观察结果是，在 render() 函数中，props 总是被定义。起初我以为它可能没有被安装或一些条件渲染问题，但 String 道具工作的事实可能会抵消这一点？我也尝试过使用<Stock ticker={String(stock.ticker)}/>，以防万一没有传递字符串，但控制台已经显示该变量是字符串道具。 另一个奇怪的现象是，当我更新我的代码并在 npm start 期间保存它时，变量 as prop 突然被定义了。在此之后页面的刷新使其再次未定义。硬编码变量/下载的 json 文件也可以正常工作。

部分组件：

class Stock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // some stuff here
    }
  }

  componentDidMount() {
    this.getStock();
  }

  getStock() {
    const key = secretstuff;
    let stock = this.props.ticker;
    console.log(this); // props says defined on console here
    console.log(this.props); // props is undefined on console here
    let call = `https://www.alphavantage.co/query?function=TIME_SERIES_DAILY_ADJUSTED&symbol=${stock}&outputsize=compact&apikey=${key}`;

父页面：

    class Page extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            stock: {}
          }
        }
      
        componentDidMount() {
          this.getStock();
        }
      
        getStock() {
           const symbol = this.props.match.params.id; // this part works
           // some fetch code, works completely fine to show on page
        }
      
        render() {
            let stock = this.state.stock;
            return (
  <div>
      <h1>{stock.ticker}</h1> // WORKS
         <h2>{stock.name}</h2> // WORKS
             </div>
                <div>
                    <Stock ticker={stock.ticker}/> // DOESN'T WORK!
                           ...... etc ............

Answer 1

您可能使用了错误的this。 在你的构造函数中添加这个来绑定：

this.getStock= this.getStock.bind(this);

Answer 2

您未包含的“获取代码”可能是异步工作的。

这意味着您的组件将至少呈现两次，一次在 getStock 完成之前和一次之后。