javascript - React redux 嵌套智能组件 - 状态未映射到道具
问题描述
我正在创建一个饮料计数器,它将计算消耗的饮料量,作为学习 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
,我有以下代码,但我收到错误“道具失败type:该道具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);
有人可以解释我哪里出错了吗?
解决方案
我已经解决了问题,在List
组件中我给了错误的道具,DrinkCounter
而name
实际上它应该是drink
。
推荐阅读
- css - 导入作用域引导 css
- firebase - 如何从firebase获取特定的id数据作为地图?
- android - Android Studio 和约束布局编辑器问题
- javascript - Javascript 日期循环
- python - 在 Python 中,所有基本数据类型都是不可变的,为什么在 String Replace() 函数中有效?
- apache-kafka-streams - KStreams 关闭 Aggregate 的内部主题
- java - Java - 客户端-服务器程序 - http 响应
- flutter - 如何在 Flutter 中更改 AppBar 中的图标
- c# - .NET Core:如果在 Windows 上运行,如何访问 Windows 凭据管理器(否则忽略)?
- php - 动态翻译、Angular 和 PHP