Javascript 如何将前端的值添加到react应用程序中的json文件中？

我已经构建了一个react应用程序，其中创建了一个文件上传机制。现在，随着文件上传，有三个下拉菜单“控制器”、“测试”和“协议”。现在，随着文件上传到服务器的功能，我使用户能够将值添加到前端本身的下拉列表中。我对上传的文件执行了一些验证，然后

我正在根据文件名添加控制器、测试和协议。因此，例如，如果上载文件的文件名为“abc_xyz_sas_uut.config”，这是脚本中的变量文件名，那么三个字段“Controller”、“Test”和“Protocol”应仅接受“abc”、“xyz”和“sas”作为各自的值

我已经编写了下面的脚本，但它给我带来了一个错误“error[ERR\u HTTP\u HEADERS\u SENT]：发送到客户端后无法设置头”。问题是我猜它会设置两次状态。任何人都可以帮助解决这个问题，任何帮助都是非常感谢的，因为我被困在这一点上

    class FileUpload extends Component {
      state = {
        file: "",
        fileName: "Choose File",
        uploadDisabled: true,
        controller: "",
        test: "",
        protocol: "",
      };
      handleFileChange = (e) => {
        let index = e.target.files[0].name.search(/\w+[_]\w+[_]\w+[_]uut.yaml-example/i);
        if (index === 0) {
          this.setState({ file: e.target.files[0] });
          this.setState({ fileName: e.target.files[0].name });
          this.setState({ uploadDisabled: false });
        } else {
          window.alert(
            "File name or format is not correct ! \nCorrect format is controller_test_protocol_uut.yaml-example"
          );

        }
        e.target.value = null;
      };
      handleUpload = async (e) => {
        console.log("Starting upload");
        const formData = new FormData();
        formData.append("file", this.state.file);
        formData.append("controller", this.state.controller);
        formData.append("test", this.state.test);
        formData.append("protocol", this.state.protocol);

        try {
          const res = await axios.post(this.props.url + "/upload", formData, {
            headers: {
              "Content-Type": "multipart/form-data",
            },
          });

          const { status } = res.data;
          if (status === "ok") {
            this.props.refreshOptions();
            this.setState({ file: "" });
            this.setState({ fileName: "Choose File" });
            this.setState({controller : ""});
            this.setState({test : ""});
            this.setState({protocol : ""});
            alert("File Uploaded Successfully");
            document.getElementById("closeButton").click();
          }
        } catch (err) {
            console.log(err); 
        }
      };
 handleTextChange = (e) => {
    this.setState({ ...this.state, [e.target.id]: e.target.value });
  };

在

else

-块中有一个

res.json（）

语句：

//Writing Config back to disk
}
else {
    res.json({
        status: "Invalidvalues"
    });
}

紧接着

res.json({
    status: "ok"
});

因此，在命中else块的情况下，

res.json（）

执行两次，这可能是导致错误的原因。应将else块中的语句更改为：

return res.json({
    status: "Invalidvalues"
});

---

非常感谢您的回复。这就是我的困惑所在，我应该把res.json（{status:“ok”}）放在哪里。用例是，如果文件有效且文件名和文本选项（控制器、测试和协议）相同，则文件将成功上载。在执行

fs.writeFileSync（…）之后，您不能将其上移到
if
-块中吗

？您还应该尝试从该处理程序中提取一个或多个方法-我认为这将大大提高代码的可读性：）哦，是的，它现在起作用了。你能再帮我一件事吗。我正在尝试在服务器收到状态后刷新字段。我也附上了前端代码。文件状态得到正确刷新，但其他三个字段没有得到刷新。嗯，老实说，我必须承认我不是一个真正的前端人员，也许最好接受并关闭这个问题，并创建一个关于前端的新问题：）