Реакция функции возврата

#javascript #reactjs

Вопрос:

Итак, у меня возникла проблема с функцией возврата «Не удается прочитать свойство undefined», я хочу, чтобы при нажатии значка со стрелкой он возвращался к КОМПОНЕНТУ 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()}

Ответ №1:

Есть пара проблем с вашим кодом.

Вы используете this компоненты in function. Нет необходимости использовать this компоненты in function, поэтому просто используйте props , когда вы хотите ее достичь.

Например, в вашем MainSettings компоненте вы пытаетесь получить props то, с this.props.navigation чем не должны. Вы можете получить его с помощью:

 const MainSettings = (props) => ...

а затем используйте, как:

 const { goBack } = props.navigation;

Вы не передаете goBack в качестве поддержки свой дочерний компонент. Итак, вы должны это сделать:

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

Вы не должны вызывать свою goBack функцию в своем onClick обработчике. Вы можете использовать ссылку:

<ArrowBackIcon className='arrow' onClick={props.navigation.goBack}

1. Я получаю эту ошибку типа: невозможно уничтожить свойство ‘GoBack’ из ‘props.navigation’, поскольку оно не определено.

2. Это не имеет отношения к вашему текущему вопросу. Итак, вы должны проверить свои реквизиты, если вы получаете navigation . Я считаю navigation , что используется с React Native, но я не вижу его в тегах. Итак, вам должно быть ясно. Но это другая проблема.

Ответ №2:

В вашем родительском элементе вам нужна useHistory:

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

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

Затем вы можете использовать ее в дочернем компоненте из родительского:

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

Сам дочерний компонент изменяет ваш ArrowBackIcon:

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

Затем нажатие на стрелку должно вернуться назад, как вы этого хотите.