Question

我遇到了一个问题，我试图从子组件内部调用位于父组件中的函数，但它只是不起作用。

现在我正在收到此错误消息： E ReactNativeJS: { [TypeError: undefined is not a function (evaluating '_this.props.setModalVisible(false)')]

我在SO上看过类似的问题，但无法弄明白。任何帮助将不胜感激！

我的父组件代码：

constructor (props) {
  super(props)
  this.setModalVisible = this.setModalVisible.bind(this)
  this.state = {
    modalVisible: false,
  }
}

setModalVisible = (visible) => {
  this.setState({modalVisible: visible});
}

...

return <Child setModalVisible={ this.setModalVisible } />;

我的孩子组件的代码：

handlePress = ( setModalVisible ) => {
  this.lookUp(setModalVisible);
}

lookUp = (setModalVisible) => {
  fetch('https://example.com/path/that/works' )
    .then( (response) => {
      if(response.ok) {

        // TRYING TO MAKE THIS WORK
        this.props.setModalVisible(false)
      }
    })
   ...
}

render () {
  const { setModalVisible } = this.props
  return (
    <Button onPress={ () => this.handlePress( this.props.setModalVisible ) }>View Thing</Button>
  )
}

Answer 1

<Button onPress={ () => this.handlePress( this.props.setModalVisible ) }>View Thing</Button>

不是将函数作为参数传递给另一个函数的正确方法，您甚至不需要它。你可以像

那样做

handlePress = (  ) => {
  this.lookUp();
}

lookUp = () => {
  fetch('https://example.com/path/that/works' )
    .then( (response) => {
      if(response.ok) {

        this.props.setModalVisible(false)
      }
    })
   ...
}

render () {
  const { setModalVisible } = this.props
  return (
    <Button onPress={ () => this.handlePress() }>View Thing</Button>
  )
}

此外，当您使用某个参数调用父函数时，您需要从父类传递它，如

  return <Child setModalVisible={(val) => this.setModalVisible(val) } />;

Answer 2

仅供参考，这是一个范围问题，我已经解决了。我仍然遇到错误，当我将parent.js的第36和40行的函数更改为箭头函数时，它已得到修复。

React Native：在调用子组件的父组件函数时遇到问题

2 个答案: