代码之家 › 专栏 › 技术社区 › Kevin.a

状态改变时再次调用函数

state reactjs javascript

Kevin.a · 技术社区 · 6 年前

我有以下功能:

  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");

我想在任何更新的时候都能回忆起自己。你能提供一个基本的例子说明你将如何做到这一点吗。上下文并不重要,只要我能找出在发生更改时如何调用函数,我就能自己找出其余的。

1 回复 | 直到 6 年前

norbitrial 6 年前

在这种情况下,如果要在特定的状态更改上触发任何函数,有一个称为 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]);

建议阅读: Using the Effect Hook