小编Ade*_*mes的帖子

无法在任何地方找到有关此的文档。这会导致useEffectEVER 再次运行吗？我不希望它获取两次，这会导致我的代码出现一些问题。

import React, { useEffect } from 'react'
import { useHistory } from 'react-router-dom'

const myComponent = () => {
  const { push } = useHistory();

  useEffect( () => {
    console.log(" THIS SHOULD RUN ONLY ONCE ");
    fetch(/*something*/)
      .then( () => push('/login') );
  }, [push]);
  

  return <p> Hello, World! </p>
}

从测试来看，它永远不会运行两次。有这种情况吗？

为了这个问题，假设组件的父组件经常重新渲染，所以这个组件也是如此。该push功能似乎不会在渲染之间改变 - 会吗？

这是一个 React 风格的问题。

TL;DR从setReact 的useState. useEffect如果该函数“更改”了每次渲染，那么在效果仅运行一次的情况下，在 中使用它的最佳方法是什么？

说明我们有一个 useEffect 需要运行一次（它获取 Firebase 数据），然后将该数据设置为应用程序状态。

这是一个简化的示例。我们正在使用Little-state-machine，它updateProfileData是更新 JSON 状态的“配置文件”部分的操作。

const MyComponent = () => {
    const { actions, state } = useStateMachine({updateProfileData, updateLoginData});
    useEffect(() => {
        const get_data_async = () => {
            const response = await get_firebase_data();
            actions.updateProfileData( {user: response.user} );
        };
        get_data_async();
    }, []);

    return (
        <p>Hello, world!</p>
    );
}

然而，ESLint 不喜欢这样： React Hook useEffect has a missing dependency: 'actions'. Either include …

react-tooltip 很棒，但我遇到了条件渲染组件的问题。

我有一个刷新图标，只显示什么时候props.refreshImages是true：

顶栏.js

import React from 'react'

export default function Topbar (props) {
  return (
    <div>
      {props.refreshImages && 
      <i data-tip="Refresh the images" className="fas fa-sync-alt" ></i>}
    </div>
  )
}

应用程序.js

import React from 'react'
import Topbar from './Topbar'
import ReactTooltip from 'react-tooltip'

export default function App() {
  return (
    <ReactTooltip />
    <Topbar refreshImages={true}/>
  )
}

简化的例子。但是当刷新图标被隐藏并再次显示时（props.refreshImages是false然后true），工具提示不会显示。

我已经尝试<ReactTooltip />进入Topbar.js并在每次渲染时运行ReactTooltip.rebuild()，但都没有奏效。因为props.refreshImages我实际上在使用 Redux。

在此先感谢您的帮助。