Javascript goBack函数

因此，我有一个问题，即goBack函数“无法读取未定义的属性”，当我按下箭头图标时，它会返回到MainSettings组件

Parent component

const MainSettings=()=> {
const [isSystemOpen, setIsSystemOpen]= React.useState(false)
const {goBack} = this.props.navigation;


  
    function openSystem(){
        setIsSystemOpen(true)
      }
      function closeSystem(){
        setIsSystemOpen(false)
      }


 return (
        <div className="mainSettings">


<ComputerIcon onClick={openSystem} />
                {isSystemOpen ? <System closeSystem={closeSystem} />: null}
</div>






Child Component

const System =(props)=> {

  
    
    return (
        <div className='mainSystem'>
            <ArrowBackIcon className='arrow'onClick={this.props.navigation.goBack()}

父组件
常量主设置=（）=>{
常量[isSystemOpen，setIsSystemOpen]=React.useState（false）
const{goBack}=this.props.navigation；
函数openSystem（）{
setIsSystemOpen（真）
}
函数系统（）{
setIsSystemOpen（错误）
}
返回(
{isSystemOpen？：null}
子组件
常量系统=（道具）=>{
返回(
在您的家长中，您需要使用历史记录：

import { userHistory } from 'react-router-dom';

function MainSettings() {
  const history = useHistory();
  function historyGoBack() {
    history.goBack();
  }
  ...

然后可以在父组件的子组件中使用它：

  <System closeSystem={closeSystem} back={this.historyGoBack()} />



子组件本身正在修改ArrowBack图标：

...
<ArrowBackIcon className='arrow' onClick={this.props.back} />

。。。

然后单击箭头应该返回到您想要的位置。
您的代码有几个问题

您在功能组件中使用的是
this
。在功能组件中不需要使用
this
，所以您只需在需要时使用
props

例如，在您的
MainSettings
组件中，您正试图使用
this.props.navigation
获取您的
props
，您不应该使用它。您可以使用：

const MainSettings = (props) => ...

然后使用类似于：

const { goBack } = props.navigation;

您没有将
goBack
作为道具传递给您的子组件。因此，您应该执行以下操作：

<System closeSystem={closeSystem} goBack={goBack} />



您不应该在
onClick
处理程序上调用
goBack
函数。您可以使用以下引用：

请提供一个最小的可复制示例。您没有
此
内部箭头函数，并且您没有传递任何
道具
我得到此类型错误：对象（…）不是一个函数我得到这个类型错误：无法分解“props.navigation”的属性“goBack”，因为它是未定义的。这与您当前的问题无关。因此，如果您得到
navigation
，您应该检查您的道具。我相信
navigation
与React Native一起使用，但我在标记中没有看到它。所以，您应该很清楚。但是，这是一个不同的问题。