为什么使用道具时函数参数返回未定义？答案

【问题标题】：Why the function argument returns undefined when using props?为什么使用道具时函数参数返回未定义？
【发布时间】：2019-07-18 08:01:36
【问题描述】：

我正在使用react-native 构建应用程序。我有 3 个组件，即 Ind.js、Buttons.js、Rain.js。我需要在Rain 中选择一个选项并将其保存为Ind 的状态以供进一步处理。因为Rain 组件与Ind 没有直接关系，而是通过Buttons 中的navigation route 连接。我正在使用react-navigation。

为此，我在Ind 中创建了一个函数onSelect()，它执行setState，并通过道具将其传递给Buttons，然后再次传递给Rain，然后我执行了该函数，问题在于函数正在被调用，但没有传递任何参数，即 console.logs null 然后 undefined。

我已尝试将console.log 传递给Ind 的参数。

Ind.js

export default class Ind extends Component {
constructor(){
super();
this.state = { report: null}
}
onSelect = (newreport) => {
      this.setState({
        report: newreport
      })
      console.log("Parameter: ", newreport)
      console.log("State: ", this.state.report)
    }

render(){
return(
<Buttons selectReport={() => this.onSelect()}
)

}

}

Buttons.js

export default class Buttons extends Component{
constructor(props){
super(props);
}
render(){
return(
<TouchableOpacity
    onPress={() => {this.props.navigation.navigate('Rain',{
                  selectReport: this.props.selectReport });
                }}>
          <Text style={styles.text}>Rain</Text>
 </TouchableOpacity>
)
}
}

Rain.js

export default class Rain extends Component{
constructor(props){
super(props);
this.state = {
selection: "Test"
}
this.selectOption = this.selectOption.bind(this);
}
selectOption = () => {
this.props.navigation.state.params.selectReport(this.state.selection)
}
}

console log 首先返回 Parameter: undefined State: null，这是可以理解的，因为没有点击任何内容，但点击后会显示 Parameter: undefined State: undefined。怎么了？我是初学者，绑定或发送道具有什么问题吗？请解释一下。

【问题讨论】：

标签： javascript react-native state setstate react-props

【解决方案1】：

使用箭头函数时，需要调用like，

<Buttons selectReport={() => this.onSelect} > //without parenthesis

setState 也是async，所以你需要在setState 中使用callback 来打印值。

你需要这样做，

export default class Ind extends Component {
  constructor(){
   super();
   this.state = { report: null}
  }
  onSelect = (newreport) => {
      console.log("Parameter: ", newreport)
      this.setState({
        report: newreport
      },()=> console.log("State: ", this.state.report)) //prints in callback
  }

  render(){
   return(
    <Buttons selectReport={() => this.onSelect}>
   )
  }
}

【讨论】：

当我使用 <Buttons selectReport={this.onSelect} 时，它给出了 this.props.navigation.state.params.selectreport 不是一个函数，但如果我使用 <Buttons selectReport={() => this.onSelect} 它可以工作。为什么？
<Buttons selectReport={() => this.onSelect} 自动绑定this。
为什么这么混乱....我在使用binding 时遇到了困难。你能找到一些资源吗？
还有参数呢？在另一个答案中提到过？
该参数在另一个答案中是静态的。当您将函数传递给子组件并期望来自子组件的参数时，您不需要括号，并且可以从子组件传递参数。

【解决方案2】：

setState 是异步函数，这就是为什么在第一次点击后你会得到 null（因为它还没有改变）但是在你的代码中传递 newreport 值的地方是错误的。

【讨论】：

是的，没错，但第二次应该打印所需的值吧？
是的，但很明显某个地方无法正常工作，您可以将 console.log 放在每个组件上并检查哪个时刻坏了吗？
我应该控制台登录Buttons 对吗？因为那是中间？我该怎么做呢？在Ind 中我记录了它，未定义，在Rain 我也记录了状态和函数引用..所有工作正常。

【解决方案3】：

您没有在点击按钮中添加任何parameters。但是，该函数接收 parameters 作为值。当然是指向undefind。

onSelect = (newreport) => {
      this.setState({
        report: newreport
      })
      console.log("Parameter: ", newreport)
      console.log("State: ", this.state.report)
    return this.state.report;
    }

render(){
return(
<Buttons selectReport={this.onSelect("value")}
)

【讨论】：

当我这样做...并单击Touchable opacity 按钮时，它说this.props.navigation.state.params.selectreport 不是函数？
@random_user 您的函数中没有结果值。请输入结果作为我的答案。
我按照你的回答做了..仍然是上述错误