React类组件中如何通过Prop补全接口URL？

问题分析 #

你的代码存在两处关键问题，导致无法正确通过Props传入symbol参数：

1. 组件构造函数中super()未传入props，可能导致this.props在部分场景下无法正常访问
2. 使用组件时传递的属性名错误，且组件内部未正确提取symbol参数

修改步骤 #

1. 修正组件内部代码

修改HighLowChart类组件，确保正确接收并使用symbol属性：

export default class HighLowChart extends Component{
    constructor(props){
        super(props); // 必须传入props，确保this.props可正常访问
        this.state = {data: []}
    }
  
    componentDidMount() {
        // 从props中提取symbol参数拼接到URL
        const endpoint = `https://www.randyconnolly.com/funwebdev/3rd/api/stocks/history.php?symbol=${this.props.symbol}`;

        fetch(endpoint)
          .then(response => response.json())
          .then(data => this.setState({data}))
    }

    // 省略其他渲染逻辑...
}

2. 修正组件调用方式

使用组件时，传递明确的属性名而非props：

<Box sx={{marginBottom: "2rem" }}>
   <HighLowChart symbol={symbol}/> {/* 这里symbol是你定义的变量，值为'amzn' */}
</Box>

补充说明 #

• React组件接收的Props是一个对象，你需要通过具体的属性名（比如symbol）来访问对应的值，而不是直接使用this.props（这样会把整个Props对象拼接到URL里，导致地址错误）
• 构造函数中传入props是React类组件的规范写法，确保组件初始化时this.props的可用性

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