如何在点击提交按钮时将圈选数据添加至headers:[]中？

要实现点击提交按钮时将输入的Key和Value添加到headers数组中，你可以按照以下步骤修改代码：

1. 添加状态变量 #

在组件内部添加用于存储当前输入的Header键、值，以及Headers数组的状态：

import { useState } from "react";

function AddResponse({ addResponse }) {
  const [name, setName] = useState("");
  const [url, setUrl] = useState("");
  // 存储当前输入的header键和值
  const [headerKey, setHeaderKey] = useState("");
  const [headerValue, setHeaderValue] = useState("");
  // 存储所有已添加的headers
  const [headers, setHeaders] = useState([]);

  // ... 其他代码
}

2. 绑定输入框的 onChange 事件 #

给Key和Value输入框绑定状态更新逻辑，确保输入内容能同步到状态中：

<input
  type="text"
  placeholder="Key"
  value={headerKey}
  onChange={(e) => setHeaderKey(e.target.value)}
/>
<input
  type="text"
  placeholder="Value"
  value={headerValue}
  onChange={(e) => setHeaderValue(e.target.value)}
/>

3. 修改提交逻辑 #

场景1：累积添加多组Header后提交 #

在handleSubmit函数中，将当前输入的Header键值对添加到headers数组，再提交完整的响应数据：

const handleSubmit = (e) => {
  e.preventDefault();
  
  // 复制现有headers数组，避免直接修改原数组
  const updatedHeaders = [...headers];
  
  // 验证输入不为空后，添加新的header
  if (headerKey.trim() && headerValue.trim()) {
    updatedHeaders.push({ key: headerKey, value: headerValue });
    // 更新headers状态，同时清空当前输入的键值对
    setHeaders(updatedHeaders);
    setHeaderKey("");
    setHeaderValue("");
  }

  // 提交包含headers的响应数据
  addResponse({
    name,
    url,
    headers: updatedHeaders
  });

  // 清空其他输入框
  setName("");
  setUrl("");
};

场景2：每次提交仅添加当前一组Header #

如果不需要累积之前的输入，仅提交当前的Key-Value组合，可以简化逻辑，无需维护headers状态：

const handleSubmit = (e) => {
  e.preventDefault();
  
  const newHeaders = [];
  if (headerKey.trim() && headerValue.trim()) {
    newHeaders.push({ key: headerKey, value: headerValue });
  }

  addResponse({
    name,
    url,
    headers: newHeaders
  });

  // 清空所有输入
  setName("");
  setUrl("");
  setHeaderKey("");
  setHeaderValue("");
};

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