时间戳

首页 > 解决方案 > 尝试通过单击按钮在 POST 请求中将状态变量设置和发送为 URL 字符串

reactjs - 尝试通过单击按钮在 POST 请求中将状态变量设置和发送为 URL 字符串

问题描述

单击时会执行两个具有自己功能的按钮，一个是 savedays，另一个是 submitdays。我想组合这些功能，所以它只有一个按钮。

  const [days, setDays] = useState({
    Monday: false,
    Tuesday: false,
    Wednesday: false,
    Thursday: false,
    Friday: false,
    Saturday: false,
    Sunday: false,
  });
  const [selectedDays, setSelectedDays] = useState("");

  const saveDays = async () => {
    await setSelectedDays((selectedDays) => "");

    if (days.Monday == true) {
      await setSelectedDays((selectedDays) => selectedDays.concat("MON,"));
    }
    if (days.Tuesday == true) {
      await setSelectedDays((selectedDays) => selectedDays.concat("TUE,"));
    }
    if (days.Wednesday == true) {
      await setSelectedDays((selectedDays) => selectedDays.concat("WED,"));
    }
    if (days.Thursday == true) {
      await setSelectedDays((selectedDays) => selectedDays.concat("THUR,"));
    }
    if (days.Friday == true) {
      await setSelectedDays((selectedDays) => selectedDays.concat("FRI,"));
    }
    if (days.Saturday == true) {
      await setSelectedDays((selectedDays) => selectedDays.concat("SAT,"));
    }
    if (days.Sunday == true) {
      await setSelectedDays((selectedDays) => selectedDays.concat("SUN,"));
    }
    await setSelectedDays((selectedDays) => selectedDays.slice(0, -1));
    console.log(selectedDays, "updated");
  };

  const submitDays = async () => {
    let postRes = await fetch(`/addSurveyDays/${selectedDays}`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
    });
    let postResult = await postRes.json();
    if (postResult.success) {
      console.log("succes posted");
    } else console.log("Something went wrong, please try again");
  };

      <button
        type="button"
        className="greyBtn"
        id="saveBtn"
        onClick={async () => {
          await saveDays();
        }}
      >
        Save
      </button>
      <button
        type="button"
        className="greyBtn"
        id="saveSubmitBtn"
        onClick={async () => {
          await submitDays();
        }}
      >
        Submit
      </button>

但是，当我将这两个功能结合起来时，只需单击一个按钮即可执行。我第一次运行它时收到此错误。

Chrome 控制台日志，"POST HTTP://localhost:3000/addSurveyDays/ 404 (Not Found)

错误仅在我第一次运行时出现，然后就可以了。有人可以帮助解释这是为什么吗？

还有 7 个其他按钮，每个按钮用于一周中的某一天，单击时打开它们各自的日期。示例：days.Monday 将在其按钮被点击时变为真

标签： reactjsfetchuse-state

解决方案

只需 (1) 将用于构建所选日期字符串的逻辑添加到单击处理程序中，然后 (2) 触发一个效果，该效果将在每次更改selectedDays状态变量后发送一个 POST 请求。

const App = () => {
  const [days, setDays] = useState({
    Monday: false,
    Tuesday: false,
    Wednesday: false,
    Thursday: false,
    Friday: false,
    Saturday: false,
    Sunday: false,
  });
  const [selectedDays, setSelectedDays] = useState("");

  useEffect(async () => {
    let postRes = await fetch(`/addSurveyDays/${selectedDays}`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Accept": "application/json",
      },
    });
    let postResult = postRes.json();
    if (postResult.success) {
      console.log("succes posted");
    } else {
      console.log("Something went wrong, please try again");
    }
  }, [selectedDays]);

  const handleSaveAndSubmit = () => {
    let newSelectedDays = "";

    Object.keys(days).forEach((day) => {
      if (days[day]) {
        newSelectedDays = newSelectedDays.concat(
          day.substring(0, 3).toUpperCase() + ","
        );
      }
    });
    console.log(newSelectedDays, "updated");
    setSelectedDays(newSelectedDays.slice(0, -1));
  };

  return (
    <button
      type="button"
      className="greyBtn"
      id="saveSubmitBtn"
      onClick={handleSaveAndSubmit}
    >
      Save and Submit
    </button>
  );
};

错误仅在我第一次运行时出现，然后就可以了。有人可以帮助解释这是为什么吗？

这仅仅是因为您无法从当前范围访问 React 功能组件中更新的状态变量。

在您的情况下，您假设selectedDays在您调用时会更新，setSelectedDays()并且您可以从当前状态访问更新的值。你不能那样做。等待多长时间都没关系（请注意，将await状态更新函数放在前面没有效果，因为它们不是Promisees）。

请参阅：useState 设置方法不立即反映更改以获取更多信息。

推荐阅读