Блог

моя цель — разрешить двум дням недели быть выходными

проблема в том, что при таком подходе я не могу ограничить массив выходных дней только двумя днями, он всегда выходит за рамки

я думаю, проблема в том, что состояние является асинхронным, а setState и useEffect имеют разные значения, но не могут решить проблему

 const weekendDays = [
    "Saturday",
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
  ];
const [weekend, setWeekend] = useState([]);

const handleWeekendSelection = ({ target }) => {
    if (target.checked) {
      !weekend.includes(target.value) amp;amp;
        setWeekend((prev) => [...prev, target.value]);
    } else {
      setWeekend((prev) => [...prev].filter((day) => day !== target.value));
    }
  };

  useEffect(() => {
    console.log(weekend.length);
    if (weekend.length > 2) {
      const checkboxes = document.querySelectorAll(
        "input[type=checkbox]:checked"
      );
      const lastCheckbox = checkboxes[checkboxes.length - 1];
      lastCheckbox.checked = false;
setWeekend((prev) => {
        const correctedWeekend = prev;
        correctedWeekend.length > 2 amp;amp; correctedWeekend.pop();
        return [...correctedWeekend];
  });
    }
  }, [weekend.length]);

        <div>
          {weekendDays.map((day, index) => {
            return (
              <div key={index}>
                <input
                  type="checkbox"
                  value={index}
                  onChange={handleWeekendSelection}
                />
                <label>{day}</label>
              </div>
            );
          })}
        </div>
 

Вместо использования useEffect было бы правильно обрабатывать его при установке в состояние. Что-то вроде этого

 const handleWeekendSelection = ({ target }) => {
    if (target.checked) {
      if(!weekend.includes(target.value)){
        let newWeekend = [...weekend, target.value]
        if(weekend.length === ) newWeekend = [weekend[1], target.value]
        setWeekend(newWeekend);
      }
        
    } else {
      setWeekend((prev) => [...prev].filter((day) => day !== target.value));
    }
  };