如何使用react将多个参数作为url中的对象传递

Posted 2023-02-24

【中文标题】如何使用react将多个参数作为url中的对象传递

【英文标题】：How to pass multiple parameters as an object in url using react

【发布时间】：2019-09-15 16:04:49

【问题描述】：

我正在尝试通过 URL（从 ReactJS 使用 Axios）将多个参数传递给我的 api (Koa)，以将数据发布到我的数据库。此代码有效，但我想知道是否有更简单的方法来传递数据而不是输入每个值以插入数据库？

我正在向我的数据库添加一个建议时间：

在 ReactJs 文件中：

axios.post(`/Advising/AddTime/$idValue/$dayValue/$startValue/$endValue/$timeValue`)

在我的 Koa (node.js) 文件中：

AdvisingRouter.post('/AddTime/:id/:day/:starttime/:endtime/:timeblock', AdvisingController.addTimes, (err) => console.log("routers.js: AdvisingRouter error:", err));

最后是我的控制器：

class AdvisingController 
async addTimes(ctx) 
    return new Promise((resolve, reject) => 
    let query = "INSERT INTO AdvisingTimes (id, Day, StartTime, EndTime, TimeBlock) VALUES (?, ?, ?, ?, ?);";
    console.log('About to run this query.', query);
        dbConnection.query(
            
                sql: query,
                values: [ctx.params.id, ctx.params.day, ctx.params.starttime, ctx.params.endtime, ctx.params.timeblock]
            , (error) => 
                if (error) 
                    return reject(error);
                
            

        )
    ).catch(err => 
        ctx.body = 
            status: "Failed",
            error: err,
            user: null
        ;
    );

【问题讨论】：

查看标记的答案：***.com/questions/53501185/…

【参考方案1】：

假设您使用的是POST，那么您始终可以将数据作为有效负载的一部分发送

axios.post('/Advising/AddTime/', 
  id,
  day,
  starttime,
  endtime,
  timeblock
);

然后在后端你可以通过ctx.request.body访问数据

注意 - 您需要包含一个正文解析器，例如 koa-body

【参考方案2】：

我使用的有用功能：

const insertParams = (url, params) =>  // url is string, params is object
  let paramUrl = url;
  const copyParams = Object.assign(, params);

  Object.keys(copyParams).forEach(key => 
    const currentParam = copyParams[key];
    if (paramUrl.includes(key)) delete copyParams[key];
    paramUrl = paramUrl.replace(`:$key`, currentParam);
  );
  return paramUrl;
;

对于您的情况，只需调用 insertParams：

const url = 'http://your.url.com/';
const params =  id: 'id123', day: 'friday', starttime: new Date(), endtime: new Date(), timeblock: 'timeblock' ;

const urlWithParams = insertParams(url, params);