Как исправить ошибку 'Не удается установить свойство' props 'из неопределенного' ошибки

Question

Когда я нажимаю кнопку «& # 60» или «& # 62» (увеличение или уменьшение уровня сложности), я получаю сообщение об ошибке «Uncaught TypeError: Невозможно установить свойство« props »of undefined» в PureComponent (Reaction.development. ЯШ: 444)

Как я могу это исправить?

Приведенный выше код намного меньше реального кода, однако даже в этом размере он не работает хорошо.

Даже «бла-бла» не появляется в консоли.

StartMenu.js

import React from 'react';
import { connect } from 'react-redux';

import increaseDifficultyLevelfunction from './increaseDifficulyLevel';
import decreaseDifficultyLevelfunction from './decreaseDifficulyLevel';


function StartMenu(props) {
  return (
    <div className="start-menu-container">

      <button
        type="button"
        id="leveldown"
        onClick={decreaseDifficultyLevelfunction}
      >
      &#60;
      </button>

      <div id="level">{props.difficultyLevel}</div>

      <button
        type="button"
        id="levelup"
        onClick={increaseDifficultyLevelfunction}
      >
        &#62;
      </button>

      <button
        type="button"
        id="startButton"
        onClick={props.restartGame}
      >
        start the game
      </button>

    </div>

  );
}

const mapStateToProps = state => ({
  difficultyLevel: state.difficultyLevel,
});

const mapDispatchToProps = dispatch => ({
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(StartMenu);

decreaseDifficultyLevel.js

import { connect } from 'react-redux';
import { decreaseDifficultyLevel } from '../../actions/actionCeator';

function decreaseDifficultyLevelfunction(props) {
  console.log('blah-blah');
  props.decreaseDifficultyLevel();
}

const mapStateToProps = state => ({
  difficultyLevel: state.difficultyLevel,
});

const mapDispatchToProps = dispatch => ({
  decreaseDifficultyLevel: () => { dispatch(decreaseDifficultyLevel()); },
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(decreaseDifficultyLevelfunction);

Answer 1

Я копался в деталях здесь и решил попробовать это в codesandbox .

Общие случаи компонента React (до перехвата) сделаны из компонента класса. В этих случаях функции / действия связываются на верхнем уровне и сохраняют свой контекст в подкомпонентах (поэтому мы можем их использовать). В компонентах функций все немного по-другому. Чтобы заставить действия работать, нужно сделать следующее:

1. свяжите ваши действия с редуксом, используя mapDispatchToProps как обычно.

   Import * as actions from ’./actions’;

   const mapDispatchToProps = dispatch => {
      return {
        actions: bindActionCreators(levelActions, dispatch)
      };
   };

2. свяжите свои действия, чтобы они могли сохранить свой контекст.

Чтобы выполнить шаг 2, необходимо объявить функции внутри функционального компонента (обычно называемого переменными класса), а затем использовать их в атрибуте кнопок onClick. Вот так:

   const {
     increaseDifficultyLevelFunction,
     decreaseDifficultyLevelFunction
   } = props.actions;

   const increaseLevel = () => increaseDifficultyLevelFunction();
   const decreaseLevel = () => decreaseDifficultyLevelFunction();

Проверьте эту ссылку , она покрыла ваш случай с примерами.