Question

我已经与React一起工作了几个月，并且最近决定实施Redux（这仍然是它的新手）。

getMusicGenreOptions函数在将其添加到减速器/实现redux之前起作用。我不确定如何在分派时将'event'（特别是event.target.name）传递给reducer函数，以便它不会返回未定义的（onClick）。

我的错误：

TypeError：无法读取未定义的属性“ target”

我的代码：

点击事件

                                <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]
        })

Answer 1

您需要牢记的几件事

综合事件数据在回调之前被清除，因此直接传递事件并从中提取信息不是一个好主意。
您必须在调用dispatch时传递数据

代码：

<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]
        })

Answer 2

按照@Subham在回答中的陈述，您不应在react中使用回调函数之外的事件数据，因为出于性能原因，React中的Synthetic Events被合并。事件池意味着一旦事件处理程序或回调被调用，事件属性将被无效，因此它们将不能再用于以后的使用。

现在回到您的原始问题，您没有将任何动作有效负载以及mapDispatchToProps中的动作类型传递给redux动作。像下面这样在分派中传递它：

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

始终尝试使redux有效负载和状态数据与普通对象一样多，以使其独立工作。现在，在您的代码中，redux部分越来越依赖于您的react事件，这不是一个好习惯。

尝试传递event.target.name-TypeError：无法读取未定义的属性“ target”

2 个答案: