Я пытаюсь отобразить список акций в виде списка кнопок, и я использую 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);
Просто чтобы убедиться, что мое состояние было обновлено, и не мутировали, я использовал перевождь-регистратор промежуточного уровня, чтобы проверить, что состояние меняется. Вот снимок, который представлен в консоли
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}
Поскольку я использую Неизменный JS, и состояние обновления, я не могу понять, почему мой компонент не будет обновляться, чтобы показать правильные реквизиты. Он не изменяется от первоначального неопределенного.
Ближайшая нить я нашел мой вопрос, это GitHub ссылка https://github.com/reactjs/redux/issues/585
Я проверил решение там, но не повезли.
Стоит отметить, что в вашем коде у вас есть конструктор() и супер() неправильный путь вокруг. –
@AlexYoung - Спасибо за это! –