在自定义 onclick 事件中触发 redux 调度答案

【问题标题】：Fire redux dispatch in custom onclick event在自定义 onclick 事件中触发 redux 调度
【发布时间】：2021-12-24 10:32:41
【问题描述】：

我四处寻找，但似乎找不到 9 或理解）如何实现这一点。

我有一个在点击时触发事件的按钮

<button onClick={TestClick}>Click Me </button>

TestClick 事件读作：

let TestClick = (e) => {
    const Dispatch = useDispatch();
    let Num = Math.random()*10;
    Dispatch(Increment(num));
};

这会触发Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. 错误。

如何在用户函数中调度？

import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

    let TestClick = () => {
        const dispatch = useDispatch();
        let Num = Math.random() * 10;
        dispatch(increment(Num));
    };

function App() {
    const counter = useSelector((state) => state.counter);
    const isLoggedIn = useSelector((state) => state.isLogged);

    const dispatch = useDispatch();

    return (
        <div className="App">
            <h1>Counter {counter}</h1>
            <button onClick={() => dispatch(increment(5))}>+</button>
            <button onClick={() => TestClick()}>+Random</button>
            <button onClick={() => dispatch(decrement())}>-</button>
            {isLoggedIn ? <h3>Valueable info</h3> : ''}
        </div>
    );
}

export default App;

【问题讨论】：

你检查Breaking the Rules of Hooks
@huMptyduMpty 所以我打破了钩子规则，因为我在事件处理程序中触发它，所以我该如何解决这个问题，因为生成的信息包含在事件处理程序中

标签： reactjs react-redux

【解决方案1】：

您不能在 React 组件或其他钩子之外使用钩子。

两种解决方案：

const useTestClick = () => {
  const dispatch = useDispatch();
  let num = Math.random() * 10;
  return () => dispatch(increment(num));
};

function App() {
  const testClick = useTestClick()

  /* ... */

  <button onClick={testClick}>+Random</button>

function App() {
  const dispatch = useDispatch();

  const testClick = useCallback(() => {
    let num = Math.random() * 10;
    return () => dispatch(increment(num));
  }, [])

  /* ... */

  <button onClick={testClick}>+Random</button>

【讨论】：

第一个 sn-p 工作，无法让第二个工作，没有错误只是没有做任何事情
@Neo 我有一个错误? 我忘记了返回时的回调。我认为。我希望。我已经有一段时间没有使用回调了。

【解决方案2】：

将TestClick 移动到组件内。为了防止每次渲染时处理程序引用发生变化，请使用useCallback

import { useCallback, useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

function App() {
    const counter = useSelector((state) => state.counter);
    const isLoggedIn = useSelector((state) => state.isLogged);

    const dispatch = useDispatch();

    const TestClick = useCallback(() => {
        let Num = Math.random() * 10;
        dispatch(increment(Num));
    }, []);

    return (
        <div className="App">
            <h1>Counter {counter}</h1>
            <button onClick={() => dispatch(increment(5))}>+</button>
            <button onClick={TestClick}>+Random</button>
            <button onClick={() => dispatch(decrement())}>-</button>
            {isLoggedIn ? <h3>Valueable info</h3> : ''}
        </div>
    );
}

export default App;

【讨论】：