dispatch is not a function at onClick in reactjs.

huangapple go评论77阅读模式
英文:

dispatch is not a function at onClick in reactjs

问题

以下是您提供的代码的翻译部分:

CounterOne

import { UseCount, UseCountActions } from "./CounterProvider";

const CounterOne = () => {
  const count = UseCount();
  const dispatch = UseCountActions();
  return (
    <div>
      <h2>count is: {count}</h2>

      <button onClick={() => dispatch({ type: "add", value: 1 })}>
        增加1
      </button>
      <button onClick={() => dispatch({ type: "decrement", value: 1 })}>
        减少
      </button>
      <button onClick={() => dispatch({ type: "reset" })}>重置</button>
    </div>
  );
};

export default CounterOne;

CounterProvider

import React, { useReducer } from "react";
import { useContext } from "react";

const CounterContext = React.createContext();
const CounterContextDispatcher = React.createContext();

const initialState = 0;

const reducer = (state, action) => {
  switch (action.type) {
    case "add":
      return state + action.value;
    case "decrement":
      return state - action.value;
    case "reset":
      return initialState;
    default:
      return state;
  }
};

const CounterProvider = ({ children }) => {
  const [count, dispatch] = useReducer(reducer, initialState);
  return (
    <CounterContext.Provider value={count}>
      <CounterContextDispatcher.Provider value={dispatch}>
        {children}
      </CounterContextDispatcher.Provider>
    </CounterContext.Provider>
  );
};

export default CounterProvider;

export const UseCount = () => useContext(CounterContext);

export const UseCountActions = () => {
  return CounterContextDispatcher;
};

请注意,我已经将代码中的HTML标签和一些英文内容进行了翻译。如果您有任何其他问题或需要进一步的帮助,请随时提问。

英文:

I want to write context with UseReducer hook but an error
error this:dispatch is not a function
what is problem?
please help me guys

almost is correct but not working it.
I want to see the appropriate action by clicking on the buttons,
one is increment, one is decrement and the other is reset.

CounterOne

import { UseCount, UseCountActions } from &quot;./CounterProvider&quot;;

const CounterOne = () =&gt; {
  const count = UseCount();
  const dispatch = UseCountActions();
  return (
    &lt;div&gt;
      &lt;h2&gt;count is:{count}&lt;/h2&gt;

      &lt;button onClick={() =&gt; dispatch({ type: &quot;add&quot;, value: 1 })}&gt;
        Addone{&quot; &quot;}
      &lt;/button&gt;
      &lt;button onClick={() =&gt; dispatch({ type: &quot;decrement&quot;, value: 1 })}&gt;
        decrement
      &lt;/button&gt;
      &lt;button onClick={() =&gt; dispatch({ type: &quot;reset&quot; })}&gt;reset&lt;/button&gt;
    &lt;/div&gt;
  );
};

export default CounterOne;

CounterProvider

import React, { useReducer, useState } from &quot;react&quot;;
import { useContext } from &quot;react&quot;;

const CounterContext = React.createContext();
const CounterContextDispather = React.createContext();

const initialState = 0;

const reducer = (state, action) =&gt; {
  switch (action.type) {
    case &quot;add&quot;:
      return state + action.value;
    case &quot;decrement&quot;:
      return state - action.value;
    case &quot;reset&quot;:
      return initialState;
    default:
      return state;
  }
};

const CounterProvider = ({ children }) =&gt; {
  const [count, dispatch] = useReducer(reducer, initialState);
  return (
    &lt;CounterContext.Provider value={count}&gt;
      &lt;CounterContextDispather.Provider value={dispatch}&gt;
        {children}
      &lt;/CounterContextDispather.Provider&gt;
    &lt;/CounterContext.Provider&gt;
  );
};

export default CounterProvider;

export const UseCount = () =&gt; useContext(CounterContext);

export const UseCountActions = () =&gt; {
  return CounterContextDispather;
};

答案1

得分: 0

导出 const UseCountActions = () =&gt; {
  返回 useContext(CounterContextDispather);
};

这里有一个官方示例


<details>
<summary>英文:</summary>

export const UseCountActions = () => {
return useContext(CounterContextDispather);
};

There is a official [example](https://beta.reactjs.org/learn/scaling-up-with-reducer-and-context)

</details>



huangapple
  • 本文由 发表于 2023年2月8日 17:38:10
  • 转载请务必保留本文链接:https://go.coder-hub.com/75383796.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定