Почему моя функция противодействия возвращает неопределенное значение? - PullRequest
Новая
       3

Почему моя функция противодействия возвращает неопределенное значение?

1 голос
/ 01 августа 2020

Вот мой пример :

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

Благодарю за любую помощь.

Ответы [ 3 ]

1 голос
/ 02 августа 2020

Проблема root в том, что функция, возвращаемая debounce, не принимает никаких параметров, и поэтому, когда вы передаете value в delayHandler, она ничего не делает.

Вот рабочий пример: 

const { useState } = React;

function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, ms);
  };
}

function App() {
  const [value, setValue] = useState("");

  const handleChange = e => {
    const { value } = e.target;
    delayHandler(value);
  };

  const delayHandler = debounce(setValue, 2000);

  return (
    <div className="App">
      <p>Current value: {value}</p>
      <form>
        <input onChange={handleChange} />
      </form>
    </div>
  );
}

////////////////////////////////////////

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React App</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
1 голос
/ 01 августа 2020

ну, похоже, delayHandler - это не функция, которая принимает значение в качестве параметров и отправляет его на debounce, вы должны сделать это, и он будет работать: 

import React, { useState } from "react";
import "./styles.css";

function debounce(fn, ms, ...args) {
  let timer;
  return () => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = null;
      fn.apply(this, args);
    }, ms);
  };
}

export default function App() {
  const [value, setValue] = useState("");

  const handleChange = e => {
    const { value } = e.target;
    delayHandler(value)();
  };

  const delayHandler = v =>
    debounce(
      value => {
        setValue(value);
      },
      2000,
      v
    );

  return (
    <div className="App">
      <p>Current value: {value}</p>
      <form>
        <input value={value} onChange={handleChange} />
      </form>
    </div>
  );
}

поэтому, передав v как аргумент к debounce он применит его к функции fn.

здесь полный пример: код

0 голосов
/ 02 августа 2020 
function debounce(fn, ms, ...args) {
  let timer;
  return () => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn(...args);
    }, ms);
  };
}

const delayHandler = value =>
    debounce(
      value => {
        setValue(value);
      },
      2000,
      value
    )();

Вот исправление, когда вы вызываете функцию debounce, вам нужно передать значение в качестве параметра, иначе аргументы не будут содержать val. Кстати, вам не нужно реализовывать это самостоятельно, вы можете использовать loda sh debounce https://lodash.com/docs/4.17.15#debounce

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...