Question

我使用react hook调用API并将数据设置为state，但是仍然有一些控件视图可以更改该值，但是当我更改它时，我的API函数再次触发，这导致我的视图重新呈现多次。 / p>

我如何像在类组件fetchData函数中一样使用componentDidMount函数？

const [brightness, setBrightness] = useState(0);

useEffect(() => {
  fetchData();
});

const fetchData = async () => {
  const value = await something();  // call API get the first value
  setBrightness(value);
};

return (
  <View>
    <SomeView value={brightness} onComplete={(value) => setBrightness(value)}
  </View>
);

Answer 1

由于未提供第二个参数，因此您的useEffect将在每次渲染时触发。

第二个参数是效果的条件。在您的情况下，您只希望它运行一次，以便提供一个空数组。

useEffect(() => {
   // Run once
}, [])

让我们说您希望它在任何道具更改时都可以获取，您可以编写

useEffect(() => {
   // run every time props.myValue changes
}, [props.myValue])

请参见https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

设置相同的状态值时如何避免触发useEffect？

1 个答案: