React redux 嵌套智能组件 - 状态未映射到道具答案

【问题标题】：React redux nested smart component - state isn't mapped to propsReact redux 嵌套智能组件 - 状态未映射到道具
【发布时间】：2019-04-26 19:07:55
【问题描述】：

我正在创建一个饮料计数器，用于计算消耗的饮料量，作为学习 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" />

进入我的App 组件。

现在这是问题开始的地方，我想再创建两个组件，一个是展示性的，一个是容器，它们将映射到我的 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);

谁能解释我哪里出错了？

【问题讨论】：

感觉就像在您的 DrinkCounter 中使用 Counter 组件但您没有将 name 属性传递给它。
我知道，但是在发生地图的List 组件中，我添加了name 像这样<DrinkCounter name={drink} key={index} /> 的道具
你的DrinkCounter 组件是什么样的？
DrinkCounter 组件的代码在问题正文中
好吧，不是真的。除了 mapStateToProps 和 mapDispatchToProps 方法之外，您没有显示任何内容。剩下的在哪里？

标签： javascript reactjs redux react-redux

【解决方案1】：

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

【讨论】：