变量值未传递给函数

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.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

实现以上内容时需要考虑的两件事

1. componentDidMount仅在组件安装时调用一次，而不在随后的重新渲染时调用

2. setState doesn't update the state immediately and is asynchronous

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

 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>