React组件传递变量为props访问时undefined 硬编码字符串正常

问题根因 #

1. 父组件Page初始化时state.stock为空对象，首次渲染时stock.ticker为undefined，此时Stock组件已经完成挂载，触发componentDidMount执行getStock方法，拿到的自然是未定义的ticker。
2. 控制台打印this时能看到props有值是浏览器的特性：控制台打印的对象为引用类型，你点击展开时才会读取对象的当前值，此时父组件已经完成接口请求更新了state，所以看到的是更新后的props；而console.log(this.props)打印的是执行时刻的快照，所以显示为undefined，两者的差异只是打印时机的问题。
3. 热更新时能正常取值是因为热更新会重新触发组件渲染和生命周期执行，此时父组件已经有完整的stock数据，所以能拿到有效值；刷新页面回到初始加载流程，就会复现undefined的问题。
4. 硬编码字符串prop正常是因为初始渲染时prop就有确定值，第一次执行componentDidMount就能拿到正确参数。

解决方案 #

方案一（更推荐）：父组件加载完成后再渲染Stock组件 #

在父组件render方法中加条件判断，仅当ticker有有效值时才渲染Stock组件，避免无效的组件挂载：

render() {
  let stock = this.state.stock;
  return (
    <div>
      <h1>{stock.ticker}</h1>
      <h2>{stock.name}</h2>
    </div>
    <div>
      {/* 新增条件判断 */}
      {stock.ticker && <Stock ticker={stock.ticker}/>}
    </div>
  )
}

方案二：Stock组件监听prop变化触发重新请求 #

在Stock组件中新增componentDidUpdate生命周期，监听ticker的变化，当prop更新后重新发起接口请求：

class Stock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 原有state逻辑
    }
  }

  componentDidMount() {
    // 新增非空判断
    if(this.props.ticker) {
      this.getStock();
    }
  }

  // 新增生命周期监听prop变化
  componentDidUpdate(prevProps) {
    if(prevProps.ticker !== this.props.ticker && this.props.ticker) {
      this.getStock();
    }
  }

  getStock() {
    const key = secretstuff;
    let stock = this.props.ticker;
    let call = `https://www.alphavantage.co/query?function=TIME_SERIES_DAILY_ADJUSTED&symbol=${stock}&outputsize=compact&apikey=${key}`;
    // 原有请求逻辑
  }
}

内容的提问来源于stack exchange，提问作者user13514855