redux 操作的分派值未更新以响应应用程序

Question

我正在编写一个应用程序来跟踪 DnD 的时间，但我面临着更新值的顺序以及传递给调度操作以更新数据库的值的问题。

这是我的组件

//Redux
import { useDispatch, useSelector } from "react-redux";
import { updateTime } from "../../Redux/actions/timeActions";

//Styles
import "./TimeButtons.css";

const TimeButtons = () => {
  const { gmDay, gmTime } = useSelector((state) => state.time);

  const [day, setDay] = useState(gmDay);
  const [time, setTime] = useState(gmTime);

  console.log(day, time);

  const dispatch = useDispatch();

  if (time > 23) {
    setTime(0);
    setDay(day + 1);
  }

  const handleTime = (value) => {
    switch (value) {
      case 1:
        setTime(time + 1);
        break;
      case 3:
        setTime(time + 3);
        break;
      case 8:
        setTime(time + 8);
        break;
      case 24:
        setTime(0);
        setDay(day + 1);
        break;
      default:
        console.log("Error");
    }

    dispatch(updateTime(day, time));
  };

  return (
    <div className="timeButtons">
      <div className="timeButtons__row 1">
        <button className="button" onClick={() => handleTime(1)}>
          1 Hour
        </button>
        <button className="button" onClick={() => handleTime(3)}>
          3 Hour
        </button>
      </div>

      <div className="timeButtons__row 2">
        <button className="button" onClick={() => handleTime(8)}>
          8 Hour
        </button>
        <button className="button" onClick={() => handleTime(24)}>
          Next day
        </button>
      </div>
    </div>
  );
};

export default TimeButtons;

基本上，当我按下任何按钮时，它应该更新变量的日期和时间，然后将该值发送到调用我的服务器的操作，但实际情况是，它发送在更新之前预览变量中的值....

所以如果我们说天 = 1 和时间 = 4....如果我按添加 1 小时，而不是发送天 = 1 时间 = 5，它发送天 = 1 和时间 = 4，然后它更新变量，但它没有将正确的值传递给调度，所以它总是落后一个值

抱歉，如果这是一个明显的问题，但我对编码还很陌生，它正在杀死我的一些脑细胞

感谢您的帮助

Answer 1

只要 day 或 time 值发生变化，您就可以在 useEffect 中调度操作：

//Redux
import { useDispatch, useSelector } from "react-redux";
import { updateTime } from "../../Redux/actions/timeActions";
import { useEffect } from "react";
//Styles
import "./TimeButtons.css";

const TimeButtons = () => {
  const { gmDay, gmTime } = useSelector((state) => state.time);

  const [day, setDay] = useState(gmDay);
  const [time, setTime] = useState(gmTime);

  console.log(day, time);

  const dispatch = useDispatch();

  if (time > 23) {
    setTime(0);
    setDay(day + 1);
  }

  const handleTime = (value) => {
    switch (value) {
      case 1:
        setTime(time + 1);
        break;
      case 3:
        setTime(time + 3);
        break;
      case 8:
        setTime(time + 8);
        break;
      case 24:
        setTime(0);
        setDay(day + 1);
        break;
      default:
        console.log("Error");
    }

  };


  useEffect(() => {
     dispatch(updateTime(day, time));
  }, [day, time]);


  return (
    <div className="timeButtons">
      <div className="timeButtons__row 1">
        <button className="button" onClick={() => handleTime(1)}>
          1 Hour
        </button>
        <button className="button" onClick={() => handleTime(3)}>
          3 Hour
        </button>
      </div>

      <div className="timeButtons__row 2">
        <button className="button" onClick={() => handleTime(8)}>
          8 Hour
        </button>
        <button className="button" onClick={() => handleTime(24)}>
          Next day
        </button>
      </div>
    </div>
  );
};

export default TimeButtons;

Answer 2

我可以回答提出的问题，但如果我理解 updateTime 在做什么，我可以给你更深入的建议。当您与服务器交互时，日期是如何存储的？它是像 {gmDay: 5, gmTime: 7} 这样的对象还是时间戳？我认为您可以使用 Javascript date methods 来处理某些边缘情况。例如，如果 gmDay 是 31 并且我们单击“第二天”怎么办？我们可能希望 gmDay 为 1 而不是 32。

一个选择是将所有逻辑移到 redux 中，只移 dispatch(increaseHours(3))。另一种选择是 select 来自 Redux 的完整日期 string 或 number，对其执行操作，然后 dispatch 使用新的完整时间执行 updateTime 操作只是几天和几小时。

主要是我只是想修正你无用的 switch 语句！只是 time + value.

一般来说，在多个地方拥有相同的数据并不是一个好主意。您已经可以从 Redux 状态访问 gmDay 和 gmTime。为什么不直接使用它呢？实际上，除了计算 updateTime.

的数字外，您似乎根本没有在这里使用组件状态

以下是如何使用 Date 增加任意小时数，正数或负数。您可以后退或前进多天。月份和年份完全是任意的，并不重要，因为我们不使用它们。

const handleTime = (value) => {
  const date = new Date(2000, 0, gmDay, gmTime);
  date.setHours(gmTime + value);
  dispatch(updateTime(date.getDate(), date.getHours()));
};

在这个特定的组件中，我们不需要处理所有可能的情况，因为我们知道 value 总是在 1 到 24 之间。所以一些简单的数学在这里是可以的，但它不太灵活。

const handleTime = (value) => {
  const day = gmDay + ( value + gmTime > 24 ? 1 : 0 );
  const time = ( gmTime + value ) % 24;
  dispatch(updateTime(day, time));
};

您的组件需要的是：

const TimeButtons = () => {
  const { gmDay, gmTime } = useSelector((state) => state.time);

  const dispatch = useDispatch();

  const handleTime = (value) => {
    const day = gmDay + (value + gmTime > 24 ? 1 : 0);
    const time = (gmTime + value) % 24;
    dispatch(updateTime(day, time));
  };

  return (
    <div className="timeButtons">
      <div className="timeButtons__row 1">
        <button className="button" onClick={() => handleTime(1)}>
          1 Hour
        </button>
        <button className="button" onClick={() => handleTime(3)}>
          3 Hour
        </button>
      </div>

      <div className="timeButtons__row 2">
        <button className="button" onClick={() => handleTime(8)}>
          8 Hour
        </button>
        <button className="button" onClick={() => handleTime(24)}>
          Next day
        </button>
      </div>
    </div>
  );
};

redux 操作的分派值未更新以响应应用程序

Dispatch values to redux action are not updated in order react app

components

reactjs

redux