Question

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

为此，我在onSelect()中创建了一个函数Ind，该函数执行setState并通过props传递给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。怎么了？我是一个初学者，绑定或发送道具时出了什么问题？请解释。

Answer 1

setState是一个异步函数，所以这就是为什么在第一次单击后您会得到null（因为它尚未更改）但在代码中某个地方传递newreport值是错误的原因。

Answer 2

您没有在点击按钮中放置任何imgEl.src = e.target.result; imgEl.setAttribute("width", 160); imgEl.setAttribute("height", 160); document.body.append(imgEl); im.onload = () => { // create the tensor after the image has loaded const fromPixels = tf.browser.fromPixels(imgEl); resolve(fromPixels); }。但是，该函数正在接收parameters作为值。当然，它指向parameters。

undefind

Answer 3

使用箭头功能时，您需要像这样调用

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

setState也是async，因此您需要在callback中使用setState来打印值。

您需要执行此操作

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}>
   )
  }
}

为什么使用props时function参数返回未定义？

3 个答案: