Dispatch не является функцией useContext / useReducer React hooks - PullRequest
Новая
       96

Dispatch не является функцией useContext / useReducer React hooks

0 голосов
/ 27 сентября 2019

Мой компонент Home.js, похоже, просто не видит функцию отправки.Ребята, вы знаете, почему?Я вроде как новичок в стиле управления состоянием в стиле Redx в Redux.

Я получаю сообщение об ошибке "Ошибка ввода: отправка не является функцией"

App.js 

import React from 'react';
import { HashRouter, Route } from 'react-router-dom';

import Home from './pages/Home';
import Start from './pages/Start';
import Result from './pages/Result';

import RPSContextProvider from './contexts/RPSContext';

const App = () => {
    return (
        <HashRouter>
            <RPSContextProvider>
                <Route exact path="/" component={Home} />
                <Route path="/start" component={Start} />
                <Route path="/result" component={Result} />
            </RPSContextProvider>
        </HashRouter>
    );
};

export default App;

Home.js 

import React, { useRef, useContext } from 'react';
import { RPSContext } from '../contexts/RPSContext';
import './home.css';

const Home = (props) => {
    const { state, dispatch } = useContext(RPSContext);
    const playerNameEntry = useRef();

    const handleClick = () => {
        if (!isStringEmpty(playerNameEntry.current.value)) {
            dispatch({ type: 'SET_NAME', state: playerNameEntry.current.value });
            props.history.push({
                pathname: '/start'
            });
            console.log(dispatch);
        }
    };

    const isStringEmpty = (string) => string.trim().length === 0;

    return (
        <div className="app-container">
            <h1>
                You dare battle me at
                <br />
                Rock, Paper, Scissors?
                <br />
                You got no chance, kid!
            </h1>
            <p>What's your name, ya chancer?</p>
            <input type="text" onKeyPress={(e) => handleKeyPress(e)} ref={playerNameEntry} />
            <button onClick={handleClick}>Start</button>
        </div>
    );
};

export default Home;

RPSContext.js 

import React, { createContext, useReducer } from 'react';
import { RPSReducer } from '../reducers/RPSReducer';

export const RPSContext = createContext();

const RPSContextProvider = (props) => {
    const [ state, dispatch ] = useReducer(RPSReducer, { playerName: '' });

    return <RPSContext.Provider value={{ state, dispatch }}>{props.children}</RPSContext.Provider>;
};

export default RPSContextProvider;

RPSReducer.js 

export const RPSReducer = (state, action) => {
    switch (action.type) {
        case 'SET_NAME':
            return { playerName: action };
        default:
            throw new Error();
    }
};

В основном в качестве первого шага я просто хочу задать имязаписи.Я знаю, что это достаточно много кода только для того, что я делаю, но просто хочу попробовать useReducer и useContext, чтобы я мог изучить все эти новые вещи в React.

1 Ответ

0 голосов
/ 27 сентября 2019

Я решил проблему, добавив 

    switch (action.type) {
        case 'SET_NAME':
            return { ...state, playerName: action.payload }

в мой редуктор, и в Home.js изменил ключ состояния, который у меня был там, на полезную нагрузку.Не уверен на 100%, влияло ли на него то же имя, но его наименее запутанное наименование полезной нагрузки. 

    const handleClick = () => {
        if (!isStringEmpty(playerNameEntry.current.value)) {
            dispatch({ type: 'SET_NAME', payload: playerNameEntry.current.value });
...