在React+axios项目中如何动态更新URL请求的查询参数

你可以按照以下方案修改组件代码，实现用用户选择的两个日期值拼接请求URL：

现有问题修正 #

你当前代码存在几个明显问题：

• onChange回调放在了<App />组件标签外，无法触发执行
• state仅存储了单个日期字段，缺少范围日期的存储位
• 未做请求触发校验，会导致componentDidUpdate重复触发请求陷入死循环

完整修正代码 #

import React, { Component } from "react";
import axios from "axios";
import App from "./Date_range";

class PostList extends Component {
  // 基础API地址，后续参数用工具拼接避免编码错误
  baseUrl = "http://127.0.0.1:8000/create_keyValue";

  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      // 分别存储两个日期选择器的取值
      datePickerValue: "",
      dateRangeValue: ""
    };
  }

  componentDidUpdate(prevProps, prevState) {
    // 仅当两个日期值都存在，且和上一次状态不一致时才发请求，避免死循环
    const { datePickerValue, dateRangeValue } = this.state;
    if (
      datePickerValue && 
      dateRangeValue &&
      (datePickerValue !== prevState.datePickerValue || dateRangeValue !== prevState.dateRangeValue)
    ) {
      // 用URLSearchParams自动拼接参数，处理特殊字符编码
      const params = new URLSearchParams({
        key: datePickerValue,
        value: dateRangeValue
      });
      axios.get(`${this.baseUrl}?${params.toString()}`)
        .then((response) => {
          this.setState({
            posts: response.data
          });
          console.log(response.data);
        })
        .catch(err => console.error('请求出错：', err));
    }
  }

  render() {
    const { posts } = this.state;
    return (
      <div>
        {/* 将onChange回调放到App组件内部，根据日期组件的返回值更新state */}
        <App 
          onChange={(datePickerVal, dateRangeVal) => {
            this.setState({
              datePickerValue: datePickerVal,
              dateRangeValue: dateRangeVal
            })
          }}
        />
        {posts.length &&
          posts.map((post) => <div key={post.id}>{post.id} </div>)}
      </div>
    );
  }
}

export default PostList;

适配说明 #

如果你的Date_range组件返回的参数结构和示例不同，只需要调整onChange回调里的取值逻辑，对应更新datePickerValue和dateRangeValue两个state字段即可，URL拼接逻辑会自动适配。

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