React-Redux: функция onClick не работает говорит "this.props.selectDog не является функцией" - PullRequest
Новая
       3

React-Redux: функция onClick не работает говорит "this.props.selectDog не является функцией"

0 голосов
/ 18 июня 2019

Я новичок в Redux и создаю простое приложение Redux.По умолчанию есть список собак, и если я нажму одну из кнопок, я смогу увидеть детали о выбранной собаке.Прямо сейчас, если я нажимаю кнопку, он говорит: «this.props.selectDog не является функцией».В консоли нет собаки внутри объекта selectedDog, вместо этого она говорит «selectedDog: function bindActionCreator ()».Как я могу исправить эту ошибку? 

Action Creator

export const selectDog = (dogs) => {
    return {
        type: 'SELECT_DOG',
        payload: dogs
    };
};

Reducer

import { combineReducers } from 'redux';

const dogsReducer = () => {
    return [
        { "breed": "Beagle", "characteristics": "playful" },
        { "breed": "Golden Retriever",  "characteristics": "calm" },
        { "breed": "Corgi",  "characteristics": "bright" },
        { "breed": "Goldendoodle",  "characteristics": "gentle" },
        { "breed": "Labrador Retriever",  "characteristics": "loyal" }
    ];
};

const selectedDogReducer = (selectedDog = null, action) => {
    if (action.type === 'SELECT_DOG') {
        return action.payload;
    }

    return selectedDog;
}

export default combineReducers({
    dogs: dogsReducer,
    selectedDog: selectedDogReducer
})

DogList.js

import React from 'react';
import { connect } from 'react-redux';
import { selectDog } from '../actions';

class DogList extends React.Component {

    renderList() {
        return this.props.dogs.map(dog => {
            console.log(this.props);
            return (
                <div key={dog.breed}>
                    <p>{dog.breed}<br />                   
                    <button onClick={() => this.props.selectedDog(dog)}>SELECT</button></p>
                    <br />
                </div>
            )
        })
    }

    render() {
        return (
            <div>
                {this.renderList()}
            </div>
        );
    }
};

const mapStateToProps = (state) => {
    return { dogs: state.dogs };
};

export default connect(mapStateToProps, {
    selectedDog: selectDog
})(DogList);

DogDetail.js

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

const DogDetail = ({dogs}) => {
    if (!dogs) {
        return <div>Select a Dog!</div>
    }

    return (
        <div>
            <h3>Dog Detail:</h3>
            <p>{dogs.breed}<br />
            {dogs.characteristics}
            </p>
        </div>
    );
};

const mapStateToProps = (state) => {
    return { dog: state.selectedDog }
};

export default connect(mapStateToProps)(DogDetail);

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

import App from './components/App';
import reducers from './reducers';

ReactDOM.render(
    <Provider store={createStore(reducers)}>
        <App />
    </Provider>,
    document.querySelector('#root')
)

Ответы [ 4 ]

2 голосов
/ 18 июня 2019

В вашей DogDetails.js опоре есть опечатка, вам нужно заменить все dogs на dog: 

const DogDetail = ({dog}) => {
    if (!dog) {
        return <div>Select a Dog!</div>
    }

    return (
        <div>
            <h3>Dog Detail:</h3>
            <p>{dog.breed}<br />
            {dog.characteristics}
            </p>
        </div>
    );
};

(Изменить: это не ответ на исходную проблему в заголовкеОтвет Джанга Ли исправил этоthis.props.selectDog не является функцией) исправлено в DogList.js путем сопоставления правильного имени действия для отправки в вашем компоненте (второй аргумент connect()).

Я рекомендую вам прочитать эту ссылку, чтобы узнать большео 2-м аргументе connect() (mapDispatchToProps) (мы определяем его здесь как объект):

https://react -redux.js.org / using-реагировать-избыточно / connect-mapdispatch #определение-mapdispatchtoprops-как-объект

1 голос
/ 18 июня 2019

Правильное имя функции - selectedDog вместо selectDog.Попробуйте this.props.selectedDog('Corgi').Или изменить на 

export default connect(mapStateToProps, {
    selectDog,
})(DogList);
0 голосов
/ 18 июня 2019

Вам необходимо соединиться с mapStateToProps и mapDispatchToProps, чтобы отправить избыточное действие 

const mapStateToProps = (state) => {
    return { dogs: state.dogs };
};

const mapDispatchToProps = (dispatch) => {
    return { selectDog : (selectDog) => dispatch(selectDog) }
}

export default connect(mapStateToProps, mapDispatchToProps)(DogList);
0 голосов
/ 18 июня 2019

Полагаю, вам нужно отправить свои действия, чтобы запустить их из вашего компонента.Вы можете прочитать больше здесь: https://react -redux.js.org / using-Reaction-redux / connect-mapdispatch

...