sportsBasketballChange 另一个地方它没有正确设置状态

Question

我想说的是我无法在sportsBasketballChange 函数中使用setState 设置值，但我可以在sportsSoccerChange 函数中设置它

• 我是 react.js 的新手
• 我正在尝试使用 setState 设置值。
• 在sportsSoccerChange 函数中正确设置setState。
• 但是sportsBasketballChange另一个地方它没有正确设置状态。
• 你们能告诉我如何解决它吗？
• 在下面提供我的代码。

部分代码

sportsSoccerChange(value) {
    this.props.onChange();

    let processedValue = value;

    // sportsMessages sportsAirFalling
    processedValue = sportsAirFallBALL(processedValue, this.props.sportsAirFall);

    // sportsSuceessOnTime-ation
    let sportsSuceessOnTime-ationResult = sportsSuceessOnTime-ateBALL(processedValue, this.props.sportsDrive);
    if (sportsSuceessOnTime-ationResult === true) {
        this.setState({ sportsOutcome: 'sportsSuceessOnTime-' });
        ///here i get value as sportsSuceessOnTime-
    }
    //this.setState({ isBALLValid: sportsSuceessOnTime-ationResult });

    // formatting
    processedValue = formatBALL(processedValue, this.props.sportsLongJump);

    // set value in local component state
    this.setState({ sportsMessagesValue: processedValue });
},

sportsBasketballChange() {
    if (this.state.sportsOutcome === 'female') {
        this.setState({ sportsOutcome: 'sportsSuceessOnTime-' });
        ///here i don't get value as sportsSuceessOnTime-
    }
},

这里有完整的代码

https://gist.github.com/js08/e20c02bf21242201c1525577d55dedbc

Answer 1

我假设您正在使用日志记录或调试检查这些注释行中 this.state 的值。

setState 是异步的。这意味着无法保证在您到达下一行代码时更改已经发生。但是，setState 允许您提供一个回调函数，以便在状态更新完成后运行。 那是您应该检查更新值的地方。

sportsBasketballChange() {
    if (this.state.sportsOutcome === 'female') {
        this.setState({ sportsOutcome: 'sportsSuceessOnTime-' },
            function(){ 
                console.log(this.state.sportsOutcome); // == 'sportsSuceessOnTime-'
            }
        );
        console.log(this.state.sportsOutcome); // untrustworthy
    }
},