Не могу изменить переменную с помощью функции обратного вызова, но ведение журнала консоли работает

Question

Я пытаюсь изменить переменную в реакции с функцией обратного вызова, но не могу этого сделать.Вот мой компонент реагирования:

const MyComponent = () => {
  let scenePinned;

  const sceneCallback = event => {
    if (event && event.state === 'DURING') {
      console.log('Pinned');
      scenePinned = true;
    } else {
      console.log('Not Pinned');
      scenePinned = false;
    }
  };

  console.log(scenePinned);

  return (
    <div>
      <div style={scenePinned ? 'pinned' : 'not pinned'}/>
      {(progress, event) => (
        //Stuff Happens Here 
      ), sceneCallback(event) )}
    </div>

  );
}

Я использую response-scrollmagic и пытаюсь заставить переменную scenePinned изменить значение с false на true и снова на false, когда сцена закреплена наверху.Регистрация в консоли Pinned и Not Pinned происходит правильно, но я не могу изменить переменную scenePinned.Я уверен, что это что-то очень простое, чего я не понимаю, но я не могу понять, почему это происходит.Буду признателен за любую помощь.

Примечание. Я пытался использовать состояние для сохранения значения, но при прокрутке вызывался обратный вызов, поэтому при попытке использовать состояние для сохранения состояния прокрутки превышена максимальная глубина.

Answer 1

console.log (scenePinned);

будет запущен в первый раз, когда страница загрузится

с помощью реакции мы используем указатель динамических значений состояния. или используйте rxjs или создайте свой собственный объект и установите слушателей на нем. с некоторым пользовательским событием

т. Е. с состоянием

state={scenePinned:null}

затем внутри метода рендеринга console.log (this.state.scenePinned)

Answer 2

• Возможное решение - определить переменную состояния в родительском компоненте, который передаст ее <MyComponent> в качестве реквизита.
• Они перемещают функцию sceneCallback в родительский компонент и передают ее как опору <MyComponent>
• Объяснение того, как определить такой обратный вызов, существует во многих местах. Вот один: (мой ...;) https://stackoverflow.com/a/55555578/5532513

Answer 3

Для этого нужно использовать состояние.В противном случае переменная переинициализируется каждый раз, когда компонент отображается, и значение теряется.