狀態道具更改時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

我檢查了在那裏的解決方案，但沒有運氣。

來源

2016-12-06 random_coder_101

值得指出的是，在你的代碼中有構造函數（）和超（）南轅北轍。 –

@AlexYoung - 謝謝！ –

好的，這是一個簡單的語法錯誤，但我會留在這裏以防萬一別人面臨同樣的問題。

需要改變的唯一事情是行

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 
    } 
}

來源

2016-12-06 17:33:28

狀態道具更改時React組件不更新

回答

相關問題