Question

我正在尝试使用受控表单组件内的useEffect挂钩，以在用户更改表单内容时通知父组件，并返回表单内容的DTO。这是我目前的尝试

const useFormInput = initialValue => {
  const [value, setValue] = useState(initialValue)

  const onChange = ({target}) => {
    console.log("onChange")
    setValue(target.value)
  }

  return { value, setValue, binding: { value, onChange }}
}
useFormInput.propTypes = {
  initialValue: PropTypes.any
}

const DummyForm = ({dummy, onChange}) => {

  const {value: foo, binding: fooBinding} = useFormInput(dummy.value)
  const {value: bar, binding: barBinding} = useFormInput(dummy.value)

  // This should run only after the initial render when user edits inputs
  useEffect(() => {
    console.log("onChange callback")
    onChange({foo, bar})
  }, [foo, bar])

  return (
    <div>
      <input type="text" {...fooBinding} />
      <div>{foo}</div>

      <input type="text" {...barBinding} />
      <div>{bar}</div>
    </div>
  )
}


function App() {
  return (
    <div className="App">
      <header className="App-header">
        <DummyForm dummy={{value: "Initial"}} onChange={(dummy) => console.log(dummy)} />
      </header>
    </div>
  );
}

但是，现在，当在安装过程中设置初始值时，效果将在第一个渲染上运行。我该如何避免？

以下是加载页面并随后编辑两个字段的当前日志。我也想知道为什么我会收到关于缺少依赖项的警告。

onChange callback
App.js:136 {foo: "Initial", bar: "Initial"}
backend.js:1 ./src/App.js
  Line 118:  React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array. If 'onChange' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
r @ backend.js:1
printWarnings @ webpackHotDevClient.js:120
handleWarnings @ webpackHotDevClient.js:125
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:190
push../node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:56
(anonymous) @ main.js:282
push../node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:280
push../node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:53
WebSocketTransport.ws.onmessage @ websocket.js:36
App.js:99 onChange
App.js:116 onChange callback
App.js:136 {foo: "Initial1", bar: "Initial"}
App.js:99 onChange
App.js:116 onChange callback
App.js:136 {foo: "Initial1", bar: "Initial2"}

Answer 1

有关如何忽略初始渲染的方法，您可以看到this answer。这种方法使用useRef来跟踪第一个渲染。

  const firstUpdate = useRef(true);
  useLayoutEffect(() => {
    if (firstUpdate.current) {
      firstUpdate.current = false;
    } else {
     // do things after first render
    }
  });

关于警告，您得到了：

React Hook useEffect缺少依赖项：'onChange'

挂钩调用（useEffect(() => {}, [foo]）中的尾随数组列出了挂钩的依赖性。这意味着，如果您在挂钩范围内使用的变量可以根据组件的更改而改变（例如，组件的属性），则需要在其中列出该变量。

Answer 2

我为此创建了一个简单的钩子

https://stackblitz.com/edit/react-skip-first-render?file=index.js

它是基于paruchuri-p

const useSkipFirstRender = (fn, args) => {
  const isMounted = useRef(false);

  useEffect(() => {
    if (isMounted.current) {
      console.log('running')
      return fn();
    }
  }, args)

  useEffect(() => {
    isMounted.current = true
  }, [])
}

第一个效果是主要效果，就像您在组件中使用它一样。它会运行，发现isMounted不是true，并且会跳过任何事情。

然后，在运行底部useEffect之后，它将把isMounted更改为true-因此，当组件被强制重新渲染时。它将允许第一个useEffect正常呈现。

它只是一个很好的自封装可重用钩子。显然，您可以更改名称，这取决于您。

Answer 3

如果您在不通过componentDidMount（）的情况下寻找类似于componentDidUpdate（）的东西，则可以编写如下钩子：

export const useComponentDidMount = () => {
  const ref = useRef();
  useEffect(() => {
    ref.current = true;
  }, []);
  return ref.current;
};

在组件中，您可以像这样使用它：

const isComponentMounted = useComponentDidMount();

useEffect(() => {
 if(isComponentMounted) {
  // Do something
 }
}, [someValue])

您的情况将是：

const DummyForm = ({dummy, onChange}) => {
  const isComponentMounted = useComponentDidMount();
  const {value: foo, binding: fooBinding} = useFormInput(dummy.value)
  const {value: bar, binding: barBinding} = useFormInput(dummy.value)

  // This should run only after the initial render when user edits inputs
  useEffect(() => {
    if(isComponentMounted) {
      console.log("onChange callback")
      onChange({foo, bar})
    }
  }, [foo, bar])

  return (
    // code
  )
}

让我知道是否有帮助。

Answer 4

我不明白为什么您首先需要useEffect。您的表单输入几乎可以肯定是controlled input components，其中表单的当前值作为prop提供，而表单仅提供onChange处理程序。表单的当前值应存储在<App>中，否则您将如何从应用程序中的其他位置访问表单的值？

const DummyForm = ({valueOne, updateOne, valueTwo, updateTwo}) => {
  return (
    <div>
      <input type="text" value={valueOne} onChange={updateOne} />
      <div>{valueOne}</div>

      <input type="text" value={valueTwo} onChange={updateTwo} />
      <div>{valueTwo}</div>
    </div>
  )
}


function App() {
  const [inputOne, setInputOne] = useState("");
  const [inputTwo, setInputTwo] = useState("");

  return (
    <div className="App">
      <header className="App-header">
        <DummyForm
          valueOne={inputOne}
          updateOne={(e) => {
            setInputOne(e.target.value);
          }}
          valueTwo={inputTwo}
          updateTwo={(e) => {
            setInputTwo(e.target.value);
          }}
        />
      </header>
    </div>
  );
}

更干净，更简单，更灵活，使用标准的React模式，不需要useEffect。

React：如何在第一次渲染时跳过useEffect

4 个答案: