ReactJS：回调错误答案

【问题标题】：ReactJS : callback errorReactJS：回调错误
【发布时间】：2018-03-22 23:46:00
【问题描述】：

我想在我的父组件上发送我的计数器，但我有一个错误。我尝试了不同的代码，但没有一个有效。

如果可以的话，我只想发送计数器，然后发送分数。

DuelTurn.JS

state = {
    compteur: 0
}

constructor(props) {
    super(props)
}

componentWillMount() {
    this.setState({compteur: this.state.compteur++}, () => {
        this.props.callback(this.state.compteur)        
    })
}

handleClick(step) {
    if(step === true) {
        console.log('gagné')

    } else {
        console.log('perdu')
    }
}

render() {
    return (
        <div>
            <div className="turn-player">Cest le tour de {this.props.pseudo} !</div>
            <div className="text-left">
                {this.props.data[0].pseudo} 
                <div>{this.props.firstScore}</div>
            </div>
            <div className="text-right">
                {this.props.data[1].pseudo}  
                <div>{this.props.secondScore}</div>
            </div>
            <div className="clear"></div>
            <div className="question"><div>Question :</div>La france a remporté la coupe du monde 98.</div>
            <div onclick={this.handleClick(true)} className="true">Vrai</div>
            <div onclick={this.handleClick(false)} className="false">Faux</div>
        </div>
        )
    }

}

DuelGame.js

class DuelGame extends React.Component {

state = {
    compteur: 0,
    firstUser: this.props.dataUser[0].pseudo,
    secondUser: this.props.dataUser[1].pseudo,
    firstScore: 0,
    secondScore: 0,
}

constructor(props) {
    super(props)
}

receiveCallBack = (compteur) => {
    this.setState({compteur})
    console.log(compteur)
}

userTurn() {
    if(this.state.compteur == 0 % 2) {
        return <DuelTurn key={this.state.firstUser} 
        pseudo={this.state.firstUser} 
        firstScore={this.state.firstScore} 
        secondScore={this.state.secondScore} 
        compteur={this.state.compteur} 
        data={this.props.dataUser} 
        callback={this.receiveCallback}/>
    } else {
        return <DuelTurn 
        key={this.state.secondUser} 
        pseudo={this.state.secondUser} 
        firstScore={this.state.firstScore} 
        secondScore={this.state.secondScore} 
        compteur={this.state.compteur} 
        data={this.props.dataUser} 
        callback={this.receiveCallback}/>
    }
}

render() {
     return (
        <div>{this.userTurn()}</div>
       )
    }

}

我的错误是：

bundle.js:36630 Uncaught TypeError: _this2.props.callback is not a function

如何解决？

【问题讨论】：

标签： javascript reactjs callback

【解决方案1】：

这是您的问题，您已将函数定义为 receiveCallBack，而您将其称为 receiveCallback (B,b)。

除了你的 props 中的数据是空的，我建议你在渲染数据之前做一个额外的检查。因此，不要使用this.props.dataUser[0]，而是使用this.props.dataUser && this.props.dataUser[0]，而对于您的this.props.dataUser[1]，请使用this.props.dataUser && this.props.dataUser[1]

您的this.props.data[0] 和this.props.data[1] 也同样使用条件渲染。

这应该可以正常工作

这是您的代码的工作版本 https://codesandbox.io/s/3196py0vqq

【讨论】：