Как выполнить sh Vue наблюдатель в React Hooks - PullRequest
Новая
       23

Как выполнить sh Vue наблюдатель в React Hooks

2 голосов
/ 07 февраля 2020

Я пытаюсь выполнить 1010 * что-то в React, используя хуки, которые я много раз делал в Vue, но не могу понять, как это сделать. Я хочу, чтобы функция запускалась при обновлении определенной переменной, однако я хочу, чтобы функция включала и другие переменные.

Функциональный код ниже точно такой же, но мой линтер говорит мне, что реагирующая версия неверна потому что хук res должен включать ввод как зависимость. Что если я не хочу, чтобы консоль запускалась при изменении ввода, а только при изменении res?

Спасибо за любую помощь! 

new Vue({
  el: "#root",
  data() {
    return {
      res: false,
      otherVar: 'other'
    }
  },
  watch: {
    res() {
      console.log(this.otherVar);
    }
  },
  created() {
    setTimeout(() => {
      this.setRes();
    }, 2000)
  },
  methods: {
    resResponse() {
      this.res = true
    }
  }
});

const [res, setRes] = useState(false);
const [input, setInput] = useState('');

useEffect(() => {
  setTimeout(() => {
    resResponse();
  }, 2000);
}, []);

useEffect(() => {
  console.log(input);
}, [res]);

const resResponse = () => {
  setRes(true);
};

1 Ответ

1 голос
/ 07 февраля 2020

Правила Linter и правила React Hook, в частности, существуют для предотвращения распространенных ошибок. Если вы считаете, что код работает должным образом, правило можно отключить: 

useEffect(() => {
  console.log(input);
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [res]);

Использование настраиваемого хука может помешать статическому анализу кода с помощью linter: 

const useWatch = (fn, inputs) => useEffect(fn, inputs);
// or just
// const useWatch = useEffect;

...

useWatch(() => {
  console.log(input);
}, [res]);
...