Попытка передать event.target.name - TypeError: Невозможно прочитать свойство 'target' из неопределенного - PullRequest
Новая
       15

Попытка передать event.target.name - TypeError: Невозможно прочитать свойство 'target' из неопределенного

1 голос
/ 01 июля 2019

Я работал с React в течение нескольких месяцев над новым проектом и недавно решил внедрить Redux (все еще плохо знакомый с ним).

Функция getMusicGenreOptions работала до добавления ее в редуктор / реализацию редукса.Я не уверен, как передать 'событие' (в частности, event.target.name) при отправке функции редуктора, чтобы оно не возвращало undefined (onClick).

Моя ошибка:

TypeError: Невозможно прочитать свойство 'target' из неопределенного

Мой код:

Событие Click 

                                <button 
                                    className="categories"
                                    name="blue note"
                                    onClick={(event) => 
                                        {
                                            event.preventDefault(); 
                                            this.props.getMusicGenreOptions(event);
                                        }
                                    }
                                    >blue note
                                </button>

Диспетчер 

const mapDispatchToProps = (dispatch, event) => {
return {
    getMusicGenreOptions: (event) => 
        dispatch({
            type: 'GET_MUSIC_GENRE_OPTIONS',
        }),
}

}

Редуктор 

export const reducerInterestForm = (state = initialState, action) => {
switch (action.type) {
    case "GET_MUSIC_GENRE_OPTIONS":
        const genre = event.target.name; // get the name of the music genre via event target
        const music = data.interest.filter( music => music.category === "music" ); // filter music specific interest into an array (no movies or television)
        const filteredOptions = music.find( options => options.group === genre); // filter out the specific genre via event target
        return Object.assign({}, state, {
            currentMusicGenre: this.state[filteredOptions.state]
        })

Ответы [ 2 ]

1 голос
/ 01 июля 2019

Есть несколько вещей, которые вы должны иметь в виду

  1. Данные синтетического события очищаются перед обратным вызовом, и поэтому не рекомендуется передавать событие напрямую и извлекать из него информацию.

  2. Вы должны передать данные при вызове диспетчеризации

Код: 

<button 
    className="categories"
    name="blue note"
    onClick={(event) => 
        {
            event.preventDefault(); 
            this.props.getMusicGenreOptions(event.target.name);
        }
    }
    >blue note
</button>

const mapDispatchToProps = (dispatch, event) => {

    return {
        getMusicGenreOptions: (name) => 
            dispatch({
                type: 'GET_MUSIC_GENRE_OPTIONS',
                name
            }),
    }

}

switch (action.type) {
    case "GET_MUSIC_GENRE_OPTIONS":
        const genre = action.name; // get the name of the music genre 
        const music = data.interest.filter( music => music.category === "music" ); // filter music specific interest into an array (no movies or television)
        const filteredOptions = music.find( options => options.group === genre); // filter out the specific genre via event target
        return Object.assign({}, state, {
            currentMusicGenre: this.state[filteredOptions.state]
        })
0 голосов
/ 01 июля 2019

Согласно утверждению @ Subham в его ответе, вы никогда не должны использовать данные событий вне функции обратного вызова в реакции, поскольку синтетические события в React объединяются для повышения производительности. Пул событий означает, что после вызова обработчика события или обратного вызова свойства события обнуляются, поэтому их нельзя использовать для будущего использования.

Теперь возвращаясь к исходному вопросу, вы не передаете никакой полезной нагрузки действия вместе с типом действия в вашем mapDispatchToProps для действия с избыточностью. Передайте его при отправке, как показано ниже: 

const mapDispatchToProps = dispatch => ({
    getMusicGenreOptions: name => dispatch({
            type: 'GET_MUSIC_GENRE_OPTIONS',
            name
        })
  });

Всегда старайтесь сохранять избыточные полезные нагрузки и данные о состоянии как простые объекты, чтобы они работали изолированно. Прямо сейчас в вашем коде редукционная часть становится зависимой от ваших реакций, что не является хорошей практикой.

...