React - Useref используется в сочетании с использованием использования

Допустим, вам приходится вызывать внешнюю API, чтобы отправить изменение имени и номер подсчета API. Каждый раз, когда имени меняются, вы должны вызвать API удаления имени API, а затем вызовите API API. Наряду с этим вам нужно подсчитать, сколько раз API назывался независимо от того, какой API вы звоните, а также отправляете номер подсчета на API.

import React, { useEffect, useState } from "react";

export default function RefTest() {
  const [text, setText] = useState("");
  const [name, setName] = useState("");
  const [cnt, setCnt] = useState(0);

  // DOM handlers
  const inputChangeHandler = ({ target }) => setText(target.value);
  const sendHandler = () => setName(text);

  // HOOK
  useEffect(() => {
    console.log(`API - Add name: ${name} cnt: ${cnt + 1}`);
    setCnt(cnt + 1);

    return () => {
      console.log(`API - Remove name: ${name} cnt: ${cnt + 1}`);
      setCnt(cnt + 1);
    };
  }, [name, setCnt]);

  return (
    
      
      
      Name: {name}
      Count: {cnt}
    
  );
}

Примечание. Все эти примеры могут быть лучше закодированы, но я пытаюсь продемонстрировать сценарий.

Существует пара вопросов в коде выше:

Eslint Проблема, где мы не добавили CNT как зависимость.
Если вы запустите код CNT неверно из-за закрытия он поддерживает более старую ценность CNT до того, как это может увеличить.

Добавление CNT в качестве зависимости

Примечание: пожалуйста, не добавляйте считать как зависимость, поскольку она приведет к бесконечному визуализации. Но если вы хотите попробовать, сделайте это на странице, которую вы можете легко убить.

Основная проблема с этим подходом отдельно от бесконечного визуализации заключается в том, что он начнет вызывать API, даже когда не могу изменения. Который мы не хотим, как мы только хотим вызвать API, когда Имя изменения.

Поддерживать CNT как Ref так что его можно обновить и мутировать, не влияя на Useffect Цикл выполнения крюка.

import React, { useEffect, useState, useRef } from "react";

export default function RefTest() {
  const [text, setText] = useState("");
  const [name, setName] = useState("");
  const [cnt, setCnt] = useState(0);
  const cntRef = useRef(cnt);

  // DOM handlers
  const inputChangeHandler = ({ target }) => setText(target.value);
  const sendHandler = () => setName(text);

  // HOOKS
  useEffect(() => {
    console.log(`API - Add name: ${name} cnt: ${cntRef.current++}`);
    setCnt(cntRef.current);

    return () => {
      console.log(`API - Remove name: ${name} cnt: ${cntRef.current++}`);
      setCnt(cntRef.current);
    };
  }, [name, setCnt]);

  return (
    
      
      
      Name: {name}
      Count: {cnt}
    
  );
}

На данный момент я использую CNT В состоянии, так что я могу показать его на UI, иначе он не нужен.

В любое время вы хотите Useffect Выполнить для штата S1. Но вы хотите использовать другие значения состояния внутри него, но не хотите, чтобы другие состояния запускали Useffect Для тех состояний, чем использование УСЭРЕФ Крюк для хранения других состояний.
Это особенно полезно, если вы подписываетесь на API, а в своем обработке вы хотите что-то сделать с входящими данными в сочетании с другими состояниями (не S1 ), прежде чем передавать его на некоторую другую работу.

Оригинал: “https://dev.to/gyandeeps/react-useref-used-in-conjunction-with-useeffect-2fhk”

Добавление CNT в качестве зависимости

Читайте ещё по теме: