设置类使用状态如果其他与反应获取状态未定义的错误

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