状态道具更改时React组件不更新
问题描述:
我想呈现一列股票作为按钮列表,并且我正在使用mapStateToProps并连接到我的反应组件到redux商店。下面是做渲染状态道具更改时React组件不更新
import React, {Component} from 'react';
import {connect} from 'react-redux';
class StockList extends Component {
super(props){
constructor(props);
this.renderButton = this.renderButton.bind(this);
}
renderButton(stock){
return(
<button key={stock} type='button' className='btn btn-primary stock-btn'>
{stock}
<span className='glyphicon glyphicon-remove' aria-hidden='true'
onClick={() => this.props.onClick(stock)}></span>
</button>
)
}
render() {
if(this.props.stocks){
return (
<div>
{this.props.stocks.map(stock => {
return this.renderButton(stock);
})}
</div>
)
}else{
return(
<div>Loading...</div>
)
}
}
}
StockList.propTypes = {
onClick: React.PropTypes.func.isRequired
};
const mapStateToProps = (state) => {
console.log(state);
return {
stocks: state.get(['tickers'])
}
}
export default connect(mapStateToProps, null)(StockList);
只是可以肯定,我的状态正在更新,而不是突变,我用终极版记录器中间件来检查状态正在发生变化的组件。下面是自从我使用不可变的JS控制台
action @ 22:43:44.408 SET_TICKERS
core.js:111 prev state Map {size: 0, _root: undefined, __ownerID: undefined, __hash: undefined, __altered: false}
core.js:115 action Object {type: "SET_TICKERS", state: Object}state: Objecttickers: Array[3]0: "AAPL"1: "TSLA"2: "GOOGL"length: 3__proto__: Array[0]__proto__: Objecttype: "SET_TICKERS"__proto__: Object__defineGetter__: __defineGetter__()__defineSetter__: __defineSetter__()__lookupGetter__: __lookupGetter__()__lookupSetter__: __lookupSetter__()constructor: Object()hasOwnProperty: hasOwnProperty()isPrototypeOf: isPrototypeOf()propertyIsEnumerable: propertyIsEnumerable()toLocaleString: toLocaleString()toString: toString()valueOf: valueOf()get __proto__: __proto__()set __proto__: __proto__()
core.js:123 next state Map {size: 1, _root: ArrayMapNode, __ownerID: undefined, __hash: undefined, __altered: false}
提出的快照,状态更新,我似乎无法找出为什么我的组件将不会更新以显示正确的道具。它不会从最初的未定义更改。
我发现我的问题,最近的线程,这是GitHub的链接 https://github.com/reactjs/redux/issues/585
我检查了在那里的解决方案,但没有运气。
答
好的,这是一个简单的语法错误,但我会留在这里以防万一别人面临同样的问题。
需要改变的唯一事情是行
const mapStateToProps = (state) => {
console.log(state);
return {
stocks: state.get(['tickers']) //this line needs to change
}
}
到
const mapStateToProps = (state) => {
console.log(state);
return {
stocks: state.get('tickers') //remove the brackets denoting array
}
}
值得指出的是,在你的代码中有构造函数()和超()南辕北辙。 –
@AlexYoung - 谢谢! –