React Redux嵌套的智能组件-状态未映射到道具

Question

I am creating a drinks counter that will count the amount of drinks consumed as part of a project to learn redux.

I have some initial state that has a drinks property that contains a collection of drinks and their current count:

 //State { drinks: { coffee: 0, water: 0, } //... } 

I have created a Counter presentational component:

 import React from 'react'; import PropTypes from 'prop-types'; import Button from './Button'; const ucFirst = string => string.charAt(0).toUpperCase() + string.slice(1); const Counter = ({name, count, onIncrement, onDecrement}) => ( <div className="counter"> <h2>{ucFirst(name)}</h2> <span>{count}</span> <Button onClick={() => {onIncrement(name)}}>+</Button> <Button onClick={() => {onDecrement(name)}}>-</Button> </div> ); Counter.propTypes = { name: PropTypes.string.isRequired, count: PropTypes.number.isRequired, onIncrement: PropTypes.func.isRequired, onDecrement: PropTypes.func.isRequired, } export default Counter; 

Followed by a DrinkCounter container component:

 import { connect } from 'react-redux' import { incrementDrink, decrementDrink } from '../actions' import Counter from '../components/Counter' const mapStateToProps = (state, ownProps) => ({ count: state.drinks[ownProps.drink], name: ownProps.drink }) const mapDispatchToProps = dispatch => ({ onIncrement: drink => dispatch(incrementDrink(drink)), onDecrement: drink => dispatch(decrementDrink(drink)) }) export default connect( mapStateToProps, mapDispatchToProps )(Counter) 

This works as expected, if I add

<DrinksContainer name="coffee" />

into my App component.

Now this is where the problem begins, I want to create two more components one presentational and one container that will map over the keys of my drinks object and output a DrinkCounter for each, I have the following code but I'm getting the error "Failed prop type: The prop name is marked as required in Counter , but its value is undefined "

Here is List container:

 import React, {Fragment} from 'react' import PropTypes from 'prop-types' import DrinkCounter from '../containers/DrinkCounter' const List = ({drinks}) => { return ( <Fragment> { Object.keys(drinks).map( (drink, index) => (<DrinkCounter name={drink} key={index} />) ) } </Fragment> ) } List.propTypes = { drinks: PropTypes.object.isRequired } export default List 

and here is the DrinksList container:

 import React from 'react'; import {connect} from 'react-redux'; import List from '../components/List'; const mapStateToProps = state => ({ drinks: state.drinks }) export default connect(mapStateToProps)(List); 

Could someone explain where I'm going wrong?

Answer 1

我已经想通了这个问题，在List组件，我给了错误的道具DrinkCounter我传递name时，实际上它应该是drink 。