Javascript React Native：从子组件调用父组件的函数时出现问题

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

现在，我当前遇到以下错误：

E ReactNativeJS:{[TypeError:undefined不是函数（计算'\u this.props.setModalVisible（false）'））

我已经看了这么多类似的问题，但无法解决。任何帮助都将不胜感激

我的父组件的代码：

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

构造函数（道具）{
超级（道具）
this.setModalVisible=this.setModalVisible.bind（this）
此.state={
modalVisible:错误，
}
}
setModalVisible=（可见）=>{
this.setState（{modalVisible:visible}）；
}
...
返回；

我的子组件的代码：

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

handlePress=（setModalVisible）=>{
查找（setModalVisible）；
}
查找=（setModalVisible）=>{
取（'https://example.com/path/that/works' )
。然后（（响应）=>{
if（response.ok）{
//努力让这一切顺利进行
this.props.setModalVisible（false）
}
})
...
}
渲染（）{
const{setModalVisible}=this.props
返回(
this.handlePress（this.props.setModalVisible）}>查看东西
)
}

this.handlePress（this.props.setModalVisible）}>查看物品

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

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

handlePress=（）=>{
这是lookUp（）；
}
查找=（）=>{
取（'https://example.com/path/that/works' )
。然后（（响应）=>{
if（response.ok）{
this.props.setModalVisible（false）
}
})
...
}
渲染（）{
const{setModalVisible}=this.props
返回(
this.handlePress（）}>查看对象
)
}

另外，当您使用某个参数调用父函数时，您需要像从父函数传递一样传递它

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

返回此.setModalVisible（val）}/>；

仅供参考，这是一个范围问题，我已经解决了。当我将

parent.js

的第36行和第40行上的函数更改为箭头函数时，仍然出现了一个错误，并且已经修复

Hrm，仍然有一个错误：

[TypeError:undefined不是一个函数（评估“\u this2.setModalVisible（val）”）

如果你不介意看一看的话，我用两个文件创建了一个要点：很难找到一个错误，你能告诉我错误点在哪一行或哪一处吗？我在parent.js的第38行传递函数，仅供参考。是的，我看了，正如你所说，箭头函数是一个解决方案，但你的答案对将来的人没有帮助，因为你在问题中从未提到过这部分代码。