使用效果钩中的问题

Question

假设我有一个称为 count 的状态。

const [count, setCount] = useState();

现在，假设我想增加 count ，每次按下键盘中的某些键时。
因此，我可以使用使用效果挂钩并添加事件侦听器。

 useEffect(() => {
    document.addEventListener("keydown", increaseCount);
 }, []);

功能增加了，增加了计数，其中1

 const increaseCount = () => {
     setCount(prevCount => prevCount + 1);
};

井都奏效了。 ，但是，如果我想在增加估计中获得 count 的当前值，我将无法做到！事件侦听器仅在组件安装时一次调用一次（因为使用效果具有空的依赖关系数组）。

如果我将 count 添加到依赖项数组中，我有一个新问题 - 我正在创建一种循环，因为使用效率会调用fightecount，它将调用setCount（），这将导致组件重新渲染，这将再次调用使用效果，依此类推。

我在目前正在从事的一些项目上遇到了这种问题，这非常令人沮丧。因此，如果您知道如何回答 - 谢谢！ :)

摘要

使用空的依赖项数组和登录计数在增加量， count 将始终为0：

// Get a hook function
    const {useState, useEffect} = React;

    const Counter = () => {
      const [count, setCount] = useState(0);

  useEffect(() => {
    document.addEventListener("keydown", increaseCount);
  }, []);

  const increaseCount = () => {
    setCount((prevCount) => prevCount + 1);
    console.log(count);
  };

      return (
        <div>
          count = {count}
        </div>
      );
    };

    // Render it
    ReactDOM.render(
      <Counter />,
      document.getElementById("react")
    );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
    <div id="react"></div>

当将 count 添加到依赖项数组中时，我们会看到这种“循环”发生的事情：

// Get a hook function
    const {useState, useEffect} = React;

    const Counter = () => {
      const [count, setCount] = useState(0);

  useEffect(() => {
    document.addEventListener("keydown", increaseCount);
  }, [count]);

  const increaseCount = () => {
    setCount((prevCount) => prevCount + 1);
    console.log(count);
  };

      return (
        <div>
          count = {count}
        </div>
      );
    };

    // Render it
    ReactDOM.render(
      <Counter />,
      document.getElementById("react")
    );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
    <div id="react"></div>

Answer 1

您的应该做的事情确实取决于您需要做什么。参见 xy问题。

如前所述，您正在尝试多种用例。

const { useState, useEffect, useMemo, Fragment } = React;

const App = () => {
  const [count, setCount] = useState(0);
  function increaseCount(ev) {
    setCount((count) => {
      const newCount = count + 1;
      // You can use the newCount here for something basic if needed...
      console.log(newCount);
      // I'm not positive, but I'm farily sure that setting other state
      // from within a set state function might be problematic.
      // If you feel the need to do something with side effects here,
      // Consider another useEffect as below.
      return newCount;
    });
  }
  useEffect(() => {
    document.addEventListener("keydown", increaseCount);
    // Always clean up after your effect!
    return () => document.removeEventListener("keydown", increaseCount);
    // If you use `increaseCount` here as a dependency (which you should), the function will get recreated every time.
    // Or you could set it up by creating the `increase count function inside the effect itself
  }, [increaseCount]);

  useEffect(() => {
    // If you need to use newCount for something more complicated, do it here...
   // Or for side effects
  }, [count]);

  const arrayCountSized = useMemo(() => {
    // You can use the count here in a useMemo for things that are
    // derived, but not stateful in-of-themselves
    return new Array(count).fill(null).map((_, idx) => idx);
  }, [count]);

  return (
    <Fragment>
      <div>{count}</div>
      <ul>
        {arrayCountSized.map((row) => (
          <li key={row}>{row}</li>
        ))}
      </ul>
    </Fragment>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>


<div id="root"/>

---

至于您特别提到的情况，这里有一个解决方案。

您可以正常从数组长度获得“当前索引”，这就是我在这里做的。

如果“ currentIndex”比那更复杂，并且与数组状态不可分割地捆绑在一起，则应用户educer以纯粹的方式设置捆绑状态。

您也可以使用对侦听器函数中数组的引用。

const arrayRef = useRef(array);
useEffect(()=>{arrayRef.current=array},[array]);
// arrayRef.current is safe to use in any effect after this.

const { useState, useEffect, useMemo, Fragment } = React;

const App = () => {
  const [array, setArray] = useState([]);
  const curIndex = array.length - 1;
  useEffect(() => {
    function addKey(ev) {
      if (ev.key.length === 1 && ev.key >= "a" && ev.key <= "z") {
        setArray((arr) => [...arr, ev.key]);
      }
    }
    document.addEventListener("keydown", addKey);
    // Always clean up after your effect!
    return () => document.removeEventListener("keydown", addKey);
  }, []);

  return (
    <Fragment>
      <div>Current Index: {curIndex}</div>
      <div>Keys pressed: </div>
      <ul>
        {array.map((row, index) => (
          <li key={index}>{row}</li>
        ))}
      </ul>
    </Fragment>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>


<div id="root"/>

---

用户使用方法：

由于我没有足够的详细信息，因此在还原器中，这与上述解决方案相同。

const { useState, useEffect, useReducer, useMemo, Fragment } = React;

function reducer(state, key) {
  if (!key) {
    return state;
  }
  const array = [...state.array, key];
  return { array, currentIndex: array.length - 1 };
}

const App = () => {
  const [{ array, currentIndex }, addKey] = useReducer(reducer, {
    array: [],
    currentIndex: -1,
  });
  useEffect(() => {
    function keydownListener(ev) {
      if (ev.key.length === 1 && ev.key >= "a" && ev.key <= "z") {
        addKey(ev.key);
      }
    }
    document.addEventListener("keydown", keydownListener);
    // Always clean up after your effect!
    return () => document.removeEventListener("keydown", keydownListener);
  }, []);

  return (
    <Fragment>
      <div>Current Index: {currentIndex}</div>
      <div>Keys pressed: </div>
      <ul>
        {array.map((row, index) => (
          <li key={index}>{row}</li>
        ))}
      </ul>
    </Fragment>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>


<div id="root"/>