Question

我是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')
)

Answer 1

您的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>
    );
};

（编辑：这不是标题中原始问题的答案，姜乐的答案已解决）

Edit2：dog prop来自您的redux状态，您正在通过connect() HOC映射它：

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

通过映射要在组件中分派的正确操作名称（this.props.selectDog的第二个参数），在DogList.js中解决了原始问题（connect()不是函数）。

我建议您阅读此链接，以详细了解connect()的第二个参数（mapDispatchToProps）（我们在此处将其定义为对象）：

https://react-redux.js.org/using-react-redux/connect-mapdispatch#defining-mapdispatchtoprops-as-an-object

Answer 2

正确的函数名称为import React, { Component } from "react"; import M from "materialize-css"; import "materialize-css/dist/css/materialize.min.css"; import data from "./data.json"; class Carousel extends Component { componentDidMount() { const options = { duration: 300, onCycleTo: () => { console.log("New Slide"); } }; M.Carousel.init(this.Carousel, options); } renderThis = () => { return data.map(i => ( <a key={i.url} className="carousel-item"> <img src={i.url} /> </a> )); }; render() { return ( <div ref={Carousel => { this.Carousel = Carousel; }} className="carousel" > {this.renderThis()} </div> ); } } export default Carousel;，而不是selectedDog。尝试selectDog。或更改为

this.props.selectedDog('Corgi')

Answer 3

我想您需要分派动作才能从组件中触发它们。您可以在此处了解更多信息：https://react-redux.js.org/using-react-redux/connect-mapdispatch

Answer 4

您需要连接mapStateToProps和mapDispatchToProps来调度redux操作

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

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

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

React-Redux：onClick函数不起作用，显示“ this.props.selectDog不是函数”

4 个答案: