React redux 嵌套智能组件 - 状态未映射到 props

Question

我正在创建一个饮料计数器，作为学习redux项目的一部分，该计数器将计算所消耗的饮料量。

我有一些初始状态，它有一个包含饮料集合和当前计数的饮料属性：

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

我创建了一个Counter表示组件：

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;

然后是DrinkCounter容器组件：

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)

如果我添加，这将按预期工作

<DrinksContainer name="coffee" />

进入我的CCD_ 3组件。

现在问题就从这里开始了，我想再创建两个组件——一个表示组件和一个容器，它们将映射到我的drinks对象的键上，并为每个对象输出一个DrinkCounter。我有以下代码，但我得到了错误"失败的道具类型：道具name在Counter中标记为必需，但其值为undefined">

这里是List容器：

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

这是DrinksList容器：

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);

有人能解释一下我哪里错了吗？

Answer 1

我已经解决了这个问题，在List组件中，我给DrinkCounter提供了错误的道具，我正在传递name，而实际上它应该是drink。