Question

我有一个像这样的状态和函数

  const [like, setLike] = useState(false);

  const likeOperation = () => {
    setLike(!like);

    if (like) {
      console.log('like is ' + like);
    }
  };

Like 一开始是假的，然后我用 !like 操作符将它设置为真。但是在我的 if 块中，like 仍然为 false，除非我再次单击它，否则我不会得到 console.log。

这是正常行为吗？

下面的代码是好的做法吗？

  const [like, setLike] = useState(false);
  const [dislike, setDislike] = useState(false);

  useEffect(() => {
    if (like && dislike) {
      setDislike(false);
    }
  }, [like]);

  useEffect(() => {
    if (dislike && like) {
      setLike(false);
    }
  }, [dislike]);

  const likeOperation = (operation = 'like') => {
    if (operation === 'like') {
      setLike(!like);
    }

    if (operation === 'dislike') {
      setDislike(!dislike);
    }
  };

Answer 1

setLike 是异步的，之后您无法立即检查 like 状态。你必须使用一个临时变量，如：

const [like, setLike] = useState(false);

  const likeOperation = () => {
    let result = !like;
    setLike(result);

    if (result) {
      console.log('like is ' + result );
    }
  };

编辑：

只是对您添加的代码的一个建议：当您读取 useEffect 钩子内的状态时，必须将每个状态变量添加到 useEffect 的 deps 列表中。所以我建议你像这样改变你的代码：

  useEffect(() => {
    if (like && dislike) {
      setDislike(false);
    }
  }, [like, dislike]);

  useEffect(() => {
    if (dislike && like) {
      setLike(false);
    }
  }, [dislike, like]);

另外，你收到了来自 React 的警告。

Answer 2

setLike 是异步的。如果你想检查什么时候喜欢改变，你可以使用 useEffect:

useEffect(() => {...your logic }, [like])

Answer 3

您必须使用 useEffect 并指定依赖项。例如：

useEffect(() => {
    likeOperation() 
    }, [like])

您可以重复使用它。

useState 更改不会在函数中更新

3 个答案: