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>

const[days，setDays]=useState({
星期一：错，
星期二：错，
星期三：错，
星期四：错，
星期五：错，
星期六：错，
星期日：错，
});
const[selectedDays，setSelectedDays]=useState（“”）；
const saveDays=async（）=>{
等待设置选定日期（（选定日期）=>“”）；
如果（days.Monday==真）{
等待设置selectedDays（（selectedDays）=>selectedDays.concat（“周一”）；
}
如果（天.星期二==真）{
等待设置selectedDays（（selectedDays）=>selectedDays.concat（“周二”）；
}
如果（天.星期三==真）{
等待设置selectedDays（（selectedDays）=>selectedDays.concat（“WED”）；
}
如果（天.星期四==真）{
等待设置selectedDays（（selectedDays）=>selectedDays.concat（“星期四”）；
}
如果（days.Friday==真）{
等待设置selectedDays（（selectedDays）=>selectedDays.concat（“FRI”）；
}
如果（天.星期六==真）{
等待设置selectedDays（（selectedDays）=>selectedDays.concat（“SAT”）；
}
如果（days.Sunday==真）{
等待设置selectedDays（（selectedDays）=>selectedDays.concat（“SUN”）；
}
等待设置selectedDays（（selectedDays）=>selectedDays.slice（0，-1））；
console.log（选择日期，“更新”）；
};
const submitDays=async（）=>{
让postRes=wait fetch（`/addSurveyDays/${selectedDays}`{
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”，
接受：“应用程序/json”，
},
});
让postResult=wait postRes.json（）；
if（postResult.success）{
控制台日志（“成功发布”）；
}else console.log（“出现问题，请重试”）；
};
{
等待保存日（）；
}}
>
拯救
{
等待提交日期（）；
}}
>
提交

但是，当我将这两个功能组合在一起时，只需单击一个按钮即可执行。我第一次运行时就出现了这个错误

Chrome控制台日志，

“发布HTTP://localhost:3000/addSurveyDays/404（未找到）

错误只有在我第一次运行它时才出现，然后就没问题了。有人能帮我解释一下原因吗

还有7个其他按钮，每个按钮对应于一周中的某一天，单击时打开各自的日期。例如：天。单击其按钮时，星期一将变为真。只需（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>
  );
};

const-App=（）=>{
const[days，setDays]=useState({
星期一：错，
星期二：错，
星期三：错，
星期四：错，
星期五：错，
星期六：错，
星期日：错，
});
const[selectedDays，setSelectedDays]=useState（“”）；
useffect（异步（）=>{
让postRes=wait fetch（`/addSurveyDays/${selectedDays}`{
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”，
},
});
让postResult=postRes.json（）；
if（postResult.success）{
控制台日志（“成功发布”）；
}否则{
log（“出现问题，请重试”）；
}
}，[selectedDays]）；
const handleSaveAndSubmit=（）=>{
让新闻选择日=”；
Object.key（天）.forEach（（天）=>{
如果（天[天]）{
newSelectedDays=newSelectedDays.concat(
day.substring（0,3）.toUpperCase（）+“，”
);
}
});
console.log（newSelectedDays，“updated”）；
setSelectedDays（newSelectedDays.slice（0，-1））；
};
返回(
保存并提交
);
};

---

错误只有在我第一次运行它时才出现，然后就没问题了。有人能帮我解释一下原因吗

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

在您的情况下，您假设调用

setSelectedDays（）

时，

selectedDays

会得到更新，并且您可以从当前状态访问更新的值。您不能这样做。等待多长时间无关紧要（请注意，将

await

放在状态更新函数前面没有效果，因为它们不是

Promise

es）

---

请参阅：了解更多信息。

看起来

所选日期

为空（即

“

）.在保存日结束时，它将是类似“MON，THUR”的内容。我只是在开始时将其清空以清空字符串。if语句应该添加到字符串中，但似乎不允许共享其余代码？尝试删除不相关的部分。我添加了一些额外信息，让我知道您的想法