Question

我需要一些有关useEffect依赖项的解释。在此示例中，我键入数字，并以分钟和秒为单位返回该数字。限制<60的效果很好，但限制> 60的效果不好。它会转换分钟，但是该值不会传递给setSeconds。诀窍是，当我删除[limit]依赖项时，所有这些工作都很好，但是由于这是更大函数的一部分，因此我想保留它。具有依赖关系如何破坏传递给setSeconds的值？

    const [seconds, setSeconds] = useState("");
    const [minutes, setMinutes] = useState("");
    const [limit, setLimit] = useState("");
    useEffect(() => {
      if (limit < 60) {
          setSeconds(limit);
          setMinutes(0);
      }
      if (limit >= 60 && limit < 3600) {
          setMinutes(Math.floor(limit / 60));
          setSeconds(limit - (60 * minutes //minutes does not pass));
      }
      }, [limit]);
    function handleChange (e) {
        if (limit === 0) {
            setLimit(null);
        }
        setLimit(e.target.value)
    }
      return (
        <div>
          <h1>{String(minutes).padStart(2, "0")}:{String(seconds).padStart(2, "0")}</h1>
            <h1>{String(limit).padStart(2, "0")}</h1>
          <input type="text" name="settime" value={limit} onChange={handleChange} />
        </div>
      )

Answer 1

setState是一个异步功能，它将等待可能的最佳更新时间而不会触发任何不必要的重新渲染。

因此，调用minutes之后，新的setMinutes值将不可用：

if (limit >= 60 && limit < 3600) {
  setMinutes(Math.floor(limit / 60));
  setSeconds(limit - (60 * minutes //minutes is still the previous value));
}

这就是React会做的。

致电setState
执行剩下的功能。
执行setState
重新渲染。

要解决此问题，您可以使用以下新值声明一个新变量：

if (limit >= 60 && limit < 3600) {
  const newMinutes = Math.floor(limit / 60);
  setMinutes(newMinutes);
  setSeconds(limit - (60 * newMinutes));
}

这样，您就不必依赖有状态的值来正确执行功能。

反应useEffect依赖关系破坏了价值传递

1 个答案: