在反应js中没有调用useEffect答案

【问题标题】：useEffect is not getting called in react js在反应js中没有调用useEffect
【发布时间】：2020-07-30 13:38:00
【问题描述】：

我是react js 的新手。在这里，我有以下没有被调用的组件。

    export const BG: React.FunctionComponent<Icard> = ({
      const state = useLocalStore(() => ({
        id = url
        setId(url) {
          state.id = url
        }
      }))

      const changeImage = () =? {

      }

      React.useEffect(() => {
        state.setId(id)
      }, [id])

      const bgWrapper = (
        <div
          className={classNames({
            [css.ImageContainer]: true,
            [css.defaultImage]: !state.imageURI
          })}>
          {isUploadMode ? (
            <upload
              imageUrl={state.imageURI}
              changeImage={changeImage}
          ) : (
            <BImage
              image={defaulImage}
            />
          )}
        </div>
      )

      return useObserver(() => (
        <div className={css.BgCard}>
          {isUploadMode ? (
            bgWrapper
          ) : (
            <p>Hello</p>
          )}
        </div>
      ))
    })

现在这里 useEffect 没有被调用。现在，如果我在不创建 jsx 变量的情况下使用它。并直接使用该div然后它就可以工作了。任何人都可以帮助我为什么没有调用 useEffect 。

【问题讨论】：

id 定义在哪里？
在组件挂载时保证至少调用一次效果。你是说它根本没有被调用过吗？还是没有按预期触发？你能清理你的代码格式吗？它非常难以阅读。
您预计会发生什么？ id 是什么？你没有在任何地方定义它。
它被调用但不是在改变 id 时
他正在使用 Mobx 的钩子，useLocalStore 在 state 中创建 id。我认为 OP 不应该接触 Mobx，直到他对基本的 react hooks 更加熟悉。见suggestion。

标签： javascript reactjs react-hooks

【解决方案1】：

您需要从useEffect 末尾的dependencies array 中删除id。该数组的目的是列出 当更改 会触发您定义的效果的所有变量。

如果你有 id 那里 - 你在第 22 个问题中，除非它被改变，否则不能改变它。

    React.useEffect(() => {
            state.setId(id)
          }, [])

【讨论】：

如果使用了一个空的依赖数组，那么该效果只会在组件挂载时触发一次。
这不是他想要的吗？ @DrewReese
OP 说它根本没有被调用。保证至少调用一次效果。问题有点不清楚。
是的。几乎可以肯定有更好的方法来更新id——不管它是在哪里定义的——但我想，他的钩子现在定义的方式首先表明了对数组的一些混淆。
不行，id变的时候应该改

【解决方案2】：

因为您的代码中有错误？

const changeImage = () =? {

  }

【讨论】：

【解决方案3】：

用ID状态设置ID状态有什么意义？您应该 state.setId() 响应一个动作（按下按钮），而不是状态变化。

我之前的回答： useEffect 的第二个参数[id] 是一个状态值数组，它会导致它运行回调（第一个参数）。

  React.useEffect(() => {
    state.setId(id)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [id])

注意：它会被 ESLint 自动添加，所以我要做的是添加// eslint-disable-next-line react-hooks/exhaustive-deps，如上所示。

根据这个SO question/ answer，您可能正在以一种单一的方式使用它。

【讨论】：