Reactjs 未捕获类型错误：无法读取属性'；设置状态'；空的

我不熟悉使用react，并遇到以下问题：

未捕获的TypeError:无法读取null的属性“setState”

基本上，我想做的是，用户可以点击三个不同的标题，点击后，它将呈现特定于该标题的模板。这是我当前使用的代码，导致我出现以下错误：

class Selection extends React.Component {

constructor(props) {
    super(props);
    this.state = {selections: [], donateActive: true, fundraiseActive: false, speakActive: false };
}

componentDidMount() {
    this.setState({
        selections: selectionData.selections
    })
}

componentWillUnMount(){
    console.log("unmounted!"); 
}

donateOnClick() {
    this.setState({ donateActive: true, fundraiseActive: false, speakActive: false});
}

fundraiseOnClick() {
    this.setState({ fundraiseActive: true, donateActive: false, speakActive: false});
}

speakOnClick() {
    this.setState({ speakActive: true, fundraiseActive: false, donateActive: false});
}

donateTemplate() {
    return (
        <div>
            <h1>donate template</h1>
        </div>
    )
}   

fundraiseTemplate() {
    return (
        <div>
            <h1>fundraise template</h1>
        </div>
    )

}

speakTemplate() {
    return (
        <div>
            <h1>speak template</h1>
        </div>
    )
}

render() {
    return(
        <div>
            <div className="col-sm-6 col-sm-push-6 right">
                <div className="right-content-container">
                    <div className="selections">
                        <h3>You can</h3>
                        <h1 onClick={this.donateOnClick} className="selection active" id="selection-donate">donate</h1>
                        <h1 onClick={this.fundraiseOnClick} className="selection" id="selection-fundraise">fundraise</h1>
                        <h1 onClick={this.speakOnClick} className="selection" id="selection-speak">speak up</h1>
                        <hr></hr>
                    </div>
                    <div>
                        {
                            if (this.state.donateActive) {
                                this.donateTemplate()
                            }
                            if (this.state.fundraiseActive) {
                                this.fundraiseTemplate()
                            }
                            if (this.state.speakActive) {
                                this.speakTemplate()
                            }
                        }
                    </div>
                </div>
            </div>
            <div className="col-sm-6 col-sm-pull-6 left">
                <div className="left-content-container">
                    <img className="img-responsive hidden-xs" src="./images/selections/.jpg" alt=""/>
                    <img className="img-responsive hidden-sm hidden-md hidden-lg" src="./images/selections/.jpg" alt=""/>
                </div>
            </div>
        </div>
    );
}


}

类选择扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={selections:[]，donateActive:true，fundraiseActive:false，speakActive:false}；
}
componentDidMount（）{
这是我的国家({
选择：selectionData.selections
})
}
组件将卸载（）{
log（“卸载！”）；
}
donateOnClick（）{
this.setState（{donateActive:true，fundraiseActive:false，speakActive:false}）；
}
筹款点击（）{
this.setState（{fundraiseActive:true，donateActive:false，speakActive:false}）；
}
speakOnClick（）{
this.setState（{speakActive:true，fundraiseActive:false，donateActive:false}）；
}
donateTemplate（）{
返回(
捐赠模板
)
}   
筹款模板（）{
返回(
筹款模板
)
}
speakTemplate（）{
返回(
说话模板
)
}
render（）{
返回(
你可以
捐赠
募捐
说话

{
if（this.state.donateActive）{
这个。donateTemplate（）
}
如果（本州筹款活动）{
本次募款活动模板（）
}
if（this.state.speakActive）{
this.speakTemplate（）
}
}
);
}
}

此外，我不确定我是否能够在

return（）

方法中使用

if

语句，是否有更好的方法

---

任何帮助都将不胜感激。

您的问题与此绑定有关。React不会自动将React组件绑定到

this

的值，构造函数和生命周期方法除外。要解决此问题，请在构造函数中，为要绑定的每个函数添加此

constructor(props) {
  super(props);
  this.donateOnClick = this.donateOnClick.bind(this);
  // other function bindings
}

至于你的

if

语句问题，只要if语句包装在

{}

中，你就可以使用它们。大括号向JSX解析器指出，其中的任何内容都应该作为javascript进行计算，因此任何有效的javascript都可以放在其中

更新：不确定那些

if

语句抛出意外令牌错误的原因，但请尝试以下操作：

<div>
    { this.state.donateActive ? this.donateTemplate() : null }
    { this.state.fundraiseActive ? this.fundraiserTemplate() : null }
    { this.state.speakactive ? this.speakTemplate() : null }
</div>

{this.state.donateActive？this.donateTemplate（）：null}
{this.state.fundraiseActive？this.fundraiserTemplate（）：null}
{this.state.speakactive？this.speakTemplate（）：null}

这是使用三元if语句。如果您不熟悉语法：

---

如果这不起作用，请用更详细的错误消息更新您的问题。特别是，我想知道它所说的什么标记是意外的

如果您这样声明方法，您还可以在类中自动绑定它们：

donateOnClick = () => {
    this.setState({ donateActive: true, fundraiseActive: false, speakActive: false});
}

fundraiseOnClick = () => {
    this.setState({ fundraiseActive: true, donateActive: false, speakActive: false});
}

speakOnClick = () => {
    this.setState({ speakActive: true, fundraiseActive: false, donateActive: false});
}

---

当前我用{}包装三个if语句的方式是否错误？我得到一个语法错误：“SyntaxError:Unexpected token”使用三元语句有效！，我想知道这是否是因为我必须将以另一种方式编写的if语句的每一行包装在{}中，以使其能够工作。注意，这是ES2016规范的一部分，可能需要额外的babel配置：也就是说，我非常喜欢

this

绑定的方法。我喜欢这种方法有多干净