React中如何向API URL传递参数？请求报错求助

看起来你遇到的unexpected end of JSON input错误，本质是API请求没有返回有效的JSON响应——大概率是因为URL参数传递方式不对，再加上代码里的小疏漏导致的。咱们一步步来修复：

1. 补上状态初始化的漏洞 #

你的组件constructor里没有初始化state，直接在render里调用this.state.buildings会导致未定义错误，先把这个基础问题补上：

constructor(props) {
  super(props);
  this.getToken = this.getToken.bind(this);
  // 初始化状态，避免map遍历时报错
  this.state = { buildings: [] };
}

2. 修正API URL的参数传递逻辑 #

根据你提供的Postman测试URL，这个API是用路径参数（把ID嵌入URL路径）而非查询参数（?xxx=xxx）来获取数据的。你当前的URL写法有两个核心问题：

• 没有把{abc_energyprogramid}替换成真实的ID值，只是写了字符串字面量
• 参数格式不符合API的预期要求

首先你需要确定abc_energyprogramid的来源：比如是第一个下拉组件的选中值，还是从props/localStorage中获取？假设你已经拿到了这个ID（比如存在this.state.selectedEnergyProgramId里），URL应该这样构建：

// 替换成你实际获取到的真实ID值
const energyProgramId = "abcde-abce-abc2-111-2222"; 
const apiUrl = `http://buildingsAPI:111/api/buildings/${energyProgramId}`;

3. 给fetch添加完整的错误处理 #

fetch不会自动对HTTP错误（比如404、500、401）抛出异常，即使请求失败，你还是会尝试解析空的或错误的响应为JSON，这就是导致语法错误的直接原因。咱们补上响应检查和错误捕获：

componentDidMount() {
  const bearerToken = this.getToken();
  // 替换成你实际获取到的abc_energyprogramid值
  const energyProgramId = "abcde-abce-abc2-111-2222"; 
  const apiUrl = `http://buildingsAPI:111/api/buildings/${energyProgramId}`;

  fetch(apiUrl, {
    method: 'GET',
    headers: {
      'Content-type': 'application/json',
      'Authorization': `Bearer ${bearerToken}`
    },
  })
  .then(results => {
    // 先检查响应是否正常
    if (!results.ok) {
      throw new Error(`请求失败！状态码: ${results.status}`);
    }
    return results.json();
  })
  .then(buildings => this.setState({ buildings }))
  .catch(error => {
    // 捕获所有错误，方便调试
    console.error('请求或JSON解析失败:', error);
  });
}

4. 补充获取abc_energyprogramid的逻辑 #

如果这个ID来自第一个已正常工作的下拉组件，你需要在那个组件的onChange事件里把选中的abc_energyprogramid保存到当前组件的状态，再触发API请求。举个简单的实现示例：

// 假设第一个下拉组件的选中事件会传递ID过来
handleEnergyProgramChange = (selectedId) => {
  this.setState({ selectedEnergyProgramId: selectedId }, () => {
    // 状态更新完成后再发起请求
    this.fetchBuildings();
  });
}

// 把请求逻辑抽成单独方法，方便复用
fetchBuildings() {
  const bearerToken = this.getToken();
  const { selectedEnergyProgramId } = this.state;
  if (!selectedEnergyProgramId) return; // 避免空ID的无效请求

  const apiUrl = `http://buildingsAPI:111/api/buildings/${selectedEnergyProgramId}`;
  // 这里复用上面的fetch请求逻辑即可
}

调试小建议 #

• 打开浏览器开发者工具的「Network」标签，查看这个API请求的状态码和响应内容，确认是否返回了有效的JSON
• 如果返回401，检查token是否正确、是否过期
• 如果返回404，确认URL路径和Postman测试的完全一致

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