Question

我试图通过setInterval方法多次使用ref API，但只有一个正在工作

我创建了一个作为数组的ref，然后尝试使用索引键将函数插入到数组中，但这仅适用于第一次插入，我不知道自己在做什么错

这是我取得的成就

# Patches for Qt must be at the very least submitted to Qt's Gerrit codereview
# rather than their bug-report Jira. The latter is rarely reviewed by Qt.
class QtAT5112 < Formula
  desc "Cross-platform application and UI framework"
  homepage "https://www.qt.io/"
  url "https://download.qt.io/official_releases/qt/5.11/5.11.2/single/qt-everywhere-src-5.11.2.tar.xz"
  mirror "https://qt.mirror.constant.com/archive/qt/5.11/5.11.2/single/qt-everywhere-src-5.11.2.tar.xz"
  mirror "https://ftp.osuosl.org/pub/blfs/conglomeration/qt5/qt-everywhere-src-5.11.2.tar.xz"
  sha256 "c6104b840b6caee596fa9a35bc5f57f67ed5a99d6a36497b6fe66f990a53ca81"
  head "https://code.qt.io/qt/qt5.git", :branch => "5.12", :shallow => false

  bottle do
    sha256 "8c77b5762267b127cc31346ac4da805bbfd59e0180d90e1e8b77fb463e929d60" => :mojave
    sha256 "096d8894b25b0fdec9b77150704491993872a7848397a04870627534fb95c9e3" => :high_sierra
    sha256 "0464be51d0eb0a45de4a1d1c6200e1d9768eec5e9737050755497a4f4de66a08" => :sierra
    sha256 "22e9abc0b47541bb03b2da7f6a19c5d7640ea2314322564551adc3d22305806e" => :el_capitan
  end

  keg_only "Qt 5 has CMake issues when linked"

  option "with-examples", "Build examples"
  option "without-proprietary-codecs", "Don't build with proprietary codecs (e.g. mp3)"

  deprecated_option "with-mysql" => "with-mysql-client"

  depends_on "pkg-config" => :build
  depends_on :xcode => :build
  depends_on "mysql-client" => :optional
  depends_on "postgresql" => :optional

  # Restore `.pc` files for framework-based build of Qt 5 on macOS, partially
  # reverting <https://codereview.qt-project.org/#/c/140954/>
  # Core formulae known to fail without this patch (as of 2016-10-15):
  #   * gnuplot (with `--with-qt` option)
  #   * mkvtoolnix (with `--with-qt` option, silent build failure)
  #   * poppler (with `--with-qt` option)
  patch do
    url "https://raw.githubusercontent.com/Homebrew/formula-patches/e8fe6567/qt5/restore-pc-files.patch"
    sha256 "48ff18be2f4050de7288bddbae7f47e949512ac4bcd126c2f504be2ac701158b"
  end

  # Chromium build failures with Xcode 10, fixed upstream:
  # https://bugs.chromium.org/p/chromium/issues/detail?id=840251
  # https://bugs.chromium.org/p/chromium/issues/detail?id=849689
  patch do
    url "https://raw.githubusercontent.com/Homebrew/formula-patches/962f0f/qt/xcode10.diff"
    sha256 "c064398411c69f2e1c516c0cd49fcd0755bc29bb19e65c5694c6d726c43389a6"
  end

  def install
    args = %W[
      -verbose
      -prefix #{prefix}
      -release
      -opensource -confirm-license
      -system-zlib
      -qt-libpng
      -qt-libjpeg
      -qt-freetype
      -qt-pcre
      -nomake tests
      -no-rpath
      -pkg-config
      -dbus-runtime
    ]

    args << "-nomake" << "examples" if build.without? "examples"

    if build.with? "mysql-client"
      args << "-plugin-sql-mysql"
      (buildpath/"brew_shim/mysql_config").write <<~EOS
        #!/bin/sh
        if [ x"$1" = x"--libs" ]; then
          mysql_config --libs | sed "s/-lssl -lcrypto//"
        else
          exec mysql_config "$@"
        fi
      EOS
      chmod 0755, "brew_shim/mysql_config"
      args << "-mysql_config" << buildpath/"brew_shim/mysql_config"
    end

    args << "-plugin-sql-psql" if build.with? "postgresql"
    args << "-proprietary-codecs" if build.with? "proprietary-codecs"

    system "./configure", *args
    system "make"
    ENV.deparallelize
    system "make", "install"

    # Some config scripts will only find Qt in a "Frameworks" folder
    frameworks.install_symlink Dir["#{lib}/*.framework"]

    # The pkg-config files installed suggest that headers can be found in the
    # `include` directory. Make this so by creating symlinks from `include` to
    # the Frameworks' Headers folders.
    Pathname.glob("#{lib}/*.framework/Headers") do |path|
      include.install_symlink path => path.parent.basename(".framework")
    end

    # Move `*.app` bundles into `libexec` to expose them to `brew linkapps` and
    # because we don't like having them in `bin`.
    # (Note: This move breaks invocation of Assistant via the Help menu
    # of both Designer and Linguist as that relies on Assistant being in `bin`.)
    libexec.mkpath
    Pathname.glob("#{bin}/*.app") { |app| mv app, libexec }
  end

  def caveats; <<~EOS
    We agreed to the Qt open source license for you.
    If this is unacceptable you should uninstall.
  EOS
  end

  test do
    (testpath/"hello.pro").write <<~EOS
      QT       += core
      QT       -= gui
      TARGET = hello
      CONFIG   += console
      CONFIG   -= app_bundle
      TEMPLATE = app
      SOURCES += main.cpp
    EOS

    (testpath/"main.cpp").write <<~EOS
      #include <QCoreApplication>
      #include <QDebug>

      int main(int argc, char *argv[])
      {
        QCoreApplication a(argc, argv);
        qDebug() << "Hello World!";
        return 0;
      }
    EOS

    system bin/"qmake", testpath/"hello.pro"
    system "make"
    assert_predicate testpath/"hello", :exist?
    assert_predicate testpath/"main.o", :exist?
    system "./hello"
  end
end

https://codesandbox.io/s/sharp-tree-k39ts

Answer 1

您无需尝试记住useRef中的多个回调。每次使用useInterval时，它都会创建一个新的钩子实例。因此，它们将彼此独立地工作。这意味着您首次使用useInterval时，将为您的useRef回调创建一个新的setCountSec(countSec + 1)。第二次使用useInterval时，它将为useRef创建setCountMin(countMin + 1)的另一个实例。您所要做的就是将interval更改为每30秒更新一次第二遍。

import React, { useState, useEffect, useRef, createRef } from "react";
import ReactDOM from "react-dom";

function Counter() {
  const [countSec, setCountSec] = useState(0);
  const [countMin, setCountMin] = useState(0);

  useInterval(() => {
    setCountSec(countSec + 1);
  }, 1000); // update every 1000ms (1sec)

  useInterval(() => {
    setCountMin(countMin + 1);
  }, 30000); // update every 30000ms (30sec)

  return <div>
      <h1>{countSec} Secounds</h1>
      <h1>{countMin} Half-Minutes</h1>
  </div>;
}

function useInterval(callback, delay) {
  const savedCallback = useRef();

  // Remember the latest function.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

Answer 2

根据您的评论

您需要在countMin之后更新countSec

这是工作代码

function Counter() {
  const [countSec, setCountSec] = useState(0);
  const [countMin, setCountMin] = useState(0);

  useEffect(()=>{
    setInterval(() => {
     setCountSec(countSec + 1); // this working 
   }, 1000);

   setInterval(() => {
    setCountMin(countMin + 1); // it's not working
   }, 1100);
  }, [])


  return <div>
      <h1>{countSec} Secounds</h1>
      <h1>{countMin} Half-Minutes</h1>
  </div>;
}

代码中几乎没有指针会在每次重新渲染时调用整个函数，并会创建一个新的setInterval ...

useEffect(()=>{},[])等效于componentDidMount

如果您想在没有此useEffect(()=>{},[])的情况下跟随您的模式，可以使用setTimeout

多次使用ref react挂钩

2 个答案: