Question

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

这是我的代码。

<com:Authorization xmlns:com="http://www.w3.org/2005/08/addressing">
   <com:ApplicationID>*****</com:ApplicationID>
   <com:Token />
</com:Authorization>

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)

然后正常工作。我也想为URL Hit设置this.props.detail(this.state.setType)的值。因此，如果匹配的url命中，那么它的状态值也会更改并传递给setType

任何帮助将不胜感激。

Answer 1

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

修改

像这样设置状态：

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

Answer 2

setState是一个异步功能。有一些变化，当您调用detail函数时，该时间状态不会更新，并且您的状态值仍然旧。

请一次写入清除并更新状态，然后对回调进行操作。

示例

componentDidMount(){
  let type = this.getType('win')

    if(this.props.match.path === '/win'){ 
        type = 'win'
    }

    if(this.props.match.path === '/lose'){ 
        type = 'lose'
    }

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

Answer 3

实施上述操作时需要考虑的两件事

componentDidMount仅在安装组件时调用一次，而不在随后的重新渲染时调用
setState doesn't update the state immediately and is asynchronous

因此，在您的情况下，您需要使用componentWillReceiveProps/componentDidUpdate来更新match属性更改的状态，并在setState回调或正在设置的存储值中第二次将值传回detail陈述。

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
    })
    const newState = type;
    if(this.props.match.path === '/win'){ 
        newState = 'win'
    }
    
    if(this.props.match.path === '/lose'){ 
        newState = 'lose'
    }
    this.setState({setType: newState});
    this.props.detail(newState)
  }
  

componentDidUpdate(prevProps){
        if(this.props.match.path !== prevProps.match.path) {
            const newState = this.state.setType;
            if(this.props.match.path === '/win'){ 
                newState = 'win'
            }

            if(this.props.match.path === '/lose'){ 
                newState = 'lose'
            }
        }    
        this.setState({setType: newState}, () => {
            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>

变量值未传递给函数

3 个答案:

示例