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

Question

点击时会执行两个具有自身功能的按钮，一个是 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 将在其按钮被单击时变为真

Answer 1

只需 (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>
  );
};

The error is only there the first time i run it, then its fine. can someone help explain why that is?

这仅仅是因为您无法从 current 范围访问 React 功能组件中的 updated 状态变量.

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

有关详细信息，请参阅：。

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

Trying to set & send a state variable as an URL string in a POST request with a single button click

fetch

reactjs

use-state