在 React 中，如何为这种类型的组件应用 componentDidMount？

Question

我有一个 React 16 应用程序。我有一个这样构造的组件...

const AddressInput = (props) => {

  const classes = useStyles();
  const { disabled, error, location, onClear, placeholder, setLocation, showMap, value } = props;

  useEffect(() => {
    console.log("use effect 1 ...");
    if (value && placesRef?.current) {
      placesRef.current.setVal(value);

      if (zoom === 0) {
        setZoom(16);
      }
    }
  }, [placesRef, value, disabled, zoom]);

  useEffect(() => {
    console.log("use effect 2 ...");
    if (location) {
      if (zoom === 0) {
        setZoom(16);
      }
      if (location.lat !== position[0]) {
        setPosition([location.lat, location.lng]);
      }
    }
  }, [location, zoom, position]);

  useEffect(() => {
    console.log("use effect 3 ...");
    console.log("setting " + inputId + " to :" + placeholder);
    if (document.getElementById(inputId)) {
      document.getElementById(inputId).value = placeholder;
    }
  }, [])
    ...
  console.log("after use effect:");
  console.log(placeholder);

  return (
    <div style={error ? { border: "solid red" } : {}}>

    ...
    </div>
  );
};


export default AddressInput;

我想在组件呈现后执行一些代码。通常我可以使用 componentDidMount，但我不确定当组件像上面那样构造时如何应用它。

Answer 1

由于您使用的是纯功能组件，因此您可以像这样使用 useEffect 挂钩（从 React v16.8 开始）：

import React, { useEffect } from "react";

const AddressInput = (props) => {

  const classes = useStyles();
  const { disabled, error, location, onClear, placeholder, setLocation, showMap, value } = props;

  useEffect(() => {
     // your code here
  }, []) // empty array acts like `componentDidMount()` in a functional component
  return (
    <div style={error ? { border: "solid red" } : {}}>

    ...
    </div>
  );
};


export default AddressInput;

您可以在此处阅读有关 useEffect 的更多信息： https://reactjs.org/docs/hooks-effect.html

在 React 中，如何为这种类型的组件应用 componentDidMount？

In React, how do you apply componentDidMount for this type of component?

components

render

function

reactjs