Вызовите функцию снова при изменении состояния - PullRequest
Новая
       4

Вызовите функцию снова при изменении состояния

1 голос
/ 13 февраля 2020

У меня есть следующая функция: 

  const getCurrentCharacters = () => {
    let result;
    let characters; 

    if(selectedMovie !== 'default'){
      characters = state.data.filter(movie => movie.title === selectedMovie)[0].characterConnection.characters;
      result = characters; 
    }else if(selectedSpecies !== 'default'){
      const currentSpecies = characters.filter(char => char.species.name === selectedSpecies || char.species === selectedSpecies);
      result = currentSpecies; 
    }else if (selectedPlanets !== 'default'){
      const currentPlanets = characters.filter(char => char.homeworld.name === selectedPlanets); 
      result = currentPlanets; 
    }else{
      return []; 
    }   

    return result; 
  }

Используются useState крючки: 

  const [selectedSpecies, setSelectedSpecies] = useState("default");
  const [selectedPlanets, setSelectedPlanets] = useState("default");
  const [selectedMovie, setSelectedMovie] = useState("default");

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

1 Ответ

2 голосов
/ 13 февраля 2020

В этом случае, если вы хотите вызвать какую-либо функцию при конкретном изменении состояния c, существует ловушка с именем useEffect. Вы можете запустить побочные эффекты с этой настройкой. Прочитайте из документации:

Хук эффектов позволяет выполнять побочные эффекты в компонентах функций.

Позвольте мне привести пример: 

const [selectedMovie, setSelectedMovie] = useState('default');

// ... other states, code part

useEffect(() => {
   console.log('selectedMovie has been changed');

   // ... here you can implement your logic for state changes
   // ... like that function call
}, [selectedMovie]);

Рекомендуется прочитать: Использование Effect Hook

Надеюсь, это поможет!

...