設置類使用狀態如果其他與反應獲取狀態未定義的錯誤

Question

我想根據我發送給組件的專業人員動態設置類。不知何故，我得到錯誤「無法讀取屬性'未定義狀態」。 我想這不存在，當我嘗試設置類的狀態類作爲一個類？在使用組件的渲染之前，我是否必須重新綁定它？

var ReactDOM = require('react-dom'); 
var React = require('react'); 

class Button extends React.Component { 
    constructor(props) { 
     super(props); 
     console.log("BUTTON") 
     console.log(props); 

     this.state = { 
      class: "small-button" 
     }; 

     props.options.map(function (option) { 
      if (option.Description > 10) { 
       this.setState({ 
        class: "big-button" 
       }); 
      } 
     }); 
     console.log("STATE: " + this.state.class); 
    } 

    render() { 
     if (this.props.options) { 
      return (<div> { 
       this.props.options.map(function (option) { 
        return <div className={ this.state.class === 'big-button' ? 'option-button big-button' : 'option-button small-button'} key={option.Id}> {option.Description}</div> 
       }) 
      } 
      </div> 
      ) 
     } else { 
      return <div>No options defined</div> 
     } 
    } 
} 

module.exports = Button; 

Answer 1

這是有約束力的問題，您需要bind功能使用this關鍵字（正確的上下文中）內部的。

使用此：

render() { 
     if (this.props.options) { 
      return (<div> { 
       this.props.options.map((option) => { 
        return <div className={ this.state.class === 'big-button' ? 'option-button big-button' : 'option-button small-button'} key={option.Id}> {option.Description}</div> 
       }) 
      } 
      </div>) 
     } else { 
      return <div>No options defined</div> 
     } 
    } 

檢查這個答案詳細的arrow function and this keyword

一個建議：不要把邏輯裏面constructor和不做setState還使用生命週期的方法那。將該邏輯放在componentDidMount方法或componentWillMount方法內。

像這樣：

class Button extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      class: "small-button" 
     }; 
    } 

    componentDidMount(){ 
     this.props.options.forEach((option) => { 
      if (option.Description > 10) { 
       this.setState({ 
        class: "big-button" 
       }); 
      } 
     }); 
    } 

    render() { 
     if (this.props.options) { 
      return (
       <div> 
       { 
        this.props.options.map((option) => { 
         return <div className={ this.state.class === 'big-button' ? 'option-button big-button' : 'option-button small-button'} key={option.Id}> {option.Description}</div> 
        }) 
       } 
       </div> 
      ) 
     }else{ 
      return <div>No options defined</div> 
     } 
    } 
}