javascript - 变量值未传入函数

Question

你好，我是 React JS 的新手。我面临一个关于变量值未传递给函数的问题。

这是我的代码。

class Main extends React.Component{

  state = {
    setType : ""
  }
  
  
  getType(getValue){
    let type = ''
    
    if(getValue === 'win'){
      type = 'win'
    }
    
    else if(getValue === 'lose'){
      type = 'lose'
    }
    
    else {
      type = ""
    }
    
    return type
  }
  
  
  componentDidMount(){
  let type = this.getType('win')
    this.setState({
      setType : type
    })
    
    if(this.props.match.path === '/win'){ 
        this.setState({
          setType : 'win'
        })
    }
    
    if(this.props.match.path === '/lose'){ 
        this.setState({
          setType : 'lose'
        })
    }
  }
  
  this.props.detail(this.state.setType)

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

如果我写 this.props.detail(type) 而不是 this.props.detail(this.state.setType)

然后就可以正常工作了。我还想在 url Hit 上设置 setType 值。这样，如果匹配的 url 命中，那么它的状态值也会更改并传递给 this.props.detail()

如有任何帮助，我们将不胜感激。

Answer 1

this.setState 是一个异步调用。当您的程序控制到达 this.props.detail() 时，setState 可能尚未完成。因此您的 this.state.setType 可能尚未使用新值进行更新。这就是为什么您的类型具有正确的值，但您的 this.state.setType 却没有。

编辑

设置状态如下:

this.setState({
      setType : type
    }, () => {
        this.props.detail(this.state.setType)
    })