React 钩子 - onClick 和 useEffect答案

【问题标题】：React hooks - onClick and useEffectReact 钩子 - onClick 和 useEffect
【发布时间】：2019-10-15 09:11:42
【问题描述】：

React Hooks 不会更新以使用传递下来然后存储的道具。通常我会通过调用 useEffect 中的功能来解决 useState 问题，但在这种情况下，我需要在点击事件后进行更新：

const [currentLayer, setCurrentLayer] = useState();

useEffect(() => {
    console.log(props.currentLayer) // props.currentLayer is defined
    setCurrentLayer(props.currentLayer);
}, [props.currentLayer]);

useEffect(() => {
    console.log(currentLayer); // currentLayer state is defined
}, [currentLayer]);

/*
 * Called when the timeline product is clicked
 */
const clickHandler = e => {
    console.log(currentLayer); // currentLayer state is undefined
    currentLayer.getSource().updateParams({ TIME: e.time });
};

return <Timeline options={props.timelineOptions} items={items} clickHandler={e => clickHandler(e)} />;

当 clickHandler 被调用时，currentLayer 状态未定义，尽管之前已设置。

结合 useEffect 和 clickHandler 的最佳方式是什么，还是我错过了其他东西？

【问题讨论】：

请用minimal reproducible example 更新您的问题来证明问题，最好是使用堆栈片段（[<>] 工具栏按钮）可运行。 Stack Snippets 支持 React，包括 JSX； here's how to do one.
真的需要一个工作示例来提出如何结合 useEffect 和点击处理程序的解决方案吗？
你为什么首先申请props.currentLayer 状态？看起来您不需要，应尽可能避免复制数据
我最初也是这么想的，在为这个问题创建一个工作示例时，我没有遇到同样的问题，一定是其他原因导致了问题。
你的逻辑很好，你需要一个可生产的例子，正如@T.J.Crowder 建议的那样，因为你得到了意想不到的行为。

标签： javascript reactjs react-hooks

【解决方案1】：

import React from 'react'

const Component = (props) => {

  // ... your other logic

  const [currentLayer, setCurrentLayer] = useState(props.currentLayer)

  const clickHandler = e => {
    currentLayer.getSource().updateParams({ TIME: e.time });
  }

  return <Timeline options={props.timelineOptions} items={items} clickHandler={clickHandler} />

}

我看不出您需要 useEffect 挂钩的原因。实际上，您不应该在该组件中设置 currentLayer 属性，而应按原样使用它。这样当 props.currentLayer 发生变化时，该组件也会重新渲染。

【讨论】：

是的，我最初是这么想的，在创建一个工作示例时，我实际上无法复制该问题，一定是其他原因导致此问题，例如 clickhandler 函数的缓存实例。
您的currentLayer 不会在props.currentLayer 更改时更新，这就是为什么需要useEffect
如何将它与 clickHandler 结合使用？

【解决方案2】：

        const clickHandler = e => {
            props.currentLayer.getSource().updateParams({ TIME: e.time });
        };

【讨论】：