在 if 语句中使用 useEffect 中的数组

Question

我正在尝试在我的代码中使用 if 语句，如果今天的日期已经发生以及我日历的过去几天打开，我希望它“打开”一个日历框。

这是我在加载 React 组件时使用 useEffect 发布的代码：

  // Call on post method via axios
  useEffect(async () => {
    console.log(daysData);

    const daysDay = daysData.map((day) => day.day);

    console.log(daysDay);

    if (date + 1 >= daysDay) {
      // Url where to post
      await axios.post(`http://localhost:5001/open/chocolate`, {
        day: date,
      });

      alert('New day is available to eat!');
    }

    setOpenCalendarBox('');
  }, []);

我正在尝试获取一个数组，我在 useEffect 函数 (daysData) 的上方启动了几行，我想要数组内部对象中的“day”项的值，然后比较日期如果它等于或小于 daysDay（daysData 中的天项），则为今天的日期

这是我的数组的代码：

// Here I initalize the array with useState
  const [daysData, setDaysData] = useState([]);

  // Here is the port I'm fetching my array from.
  useEffect(() => {
    fetch('http://localhost:5001/chocolates')
      .then((resp) => resp.json())
      .then((data) => setDaysData(data));
  }, []);

这里是日期代码：

  // Initiate new Date
  const current = new Date();
  // Retrieve current day of the month
  const date = current.getDate();

我似乎无法得到我想要的效果。我基本上只想看看这一天是否已经过去，或者如果是今天，那么我希望它发布到'/open/chocolate'。

Answer 1

这可能是因为daysData 的值是异步设置的，但是依赖它的useEffect 块并没有将其列为依赖项。因此，您正在调用逻辑，这需要在运行时加载组件时异步填充 daysData。所以daysData 将是空的。

一种解决方案是在依赖数组中简单地添加daysData，这样您就只会在成功填充数组后执行其中的任何逻辑。

另一方面，您正在将一个数字与一个数组进行比较：这会产生意想不到的结果。如果您想在任何一天与date + 1 见面，请使用daysDay.some(d => date + 1 >= d)。如果您希望所有时间都与date + 1 见面，请使用daysDate.every(d => date + 1 >= d)。

useEffect(async () => {
  const daysDay = daysData.map((day) => day.day);

  // This needs to be fixed, see comment for options
  if (daysDay.some(d => date + 1 > d)) {
    // Url where to post
    await axios.post(`http://localhost:5001/open/chocolate`, {
      day: date,
    });
  }

  setOpenCalendarBox('');
}, [daysData]);