来自另一个功能组件的设置状态

Question

我刚刚从反应类过来，开始思考钩子和功能组件。我有一段加载地图脚本的代码

let autoComplete;
// dynamically load JavaScript files in our html with callback when finished
const loadScript = (url, callback) => {
  let script = document.createElement("script"); // create script tag
  script.type = "text/javascript";

  // when script state is ready and loaded or complete we will call callback
  if (script.readyState) {
    script.onreadystatechange = function () {
      if (script.readyState === "loaded" || script.readyState === "complete") {
        script.onreadystatechange = null;
        callback();
      }
    };
  } else {
    script.onload = () => callback();
  }

  script.src = url; // load by url
  document.getElementsByTagName("head")[0].appendChild(script); // append to head
};

// handle when the script is loaded we will assign autoCompleteRef with google maps place autocomplete
function handleScriptLoad(updateQuery, autoCompleteRef) {
  // assign autoComplete with Google maps place one time
  autoComplete = new window.google.maps.places.Autocomplete(
    autoCompleteRef.current,
    {
      types: ["establishment"],
      strictBounds: true,
      fields: ["address_components", "name", "geometry"],
      componentRestrictions: { country: "us" },
    }
  );
  autoComplete.setFields(["address_components", "formatted_address"]); // specify what properties we will get from API
  // add a listener to handle when the place is selected
  autoComplete.addListener("place_changed", async () => {
    handlePlaceSelect(updateQuery);
  });
}

我需要从下面的函数中设置状态或更新状态，但它不是保持状态的主函数

function handlePlaceSelect(updateQuery) {
  const [coodinates, setCoordinates] = useState({
    lat: null,
    lng: null,
  });

  const addressObject = autoComplete.getPlace(); // get place from google api
  const query = addressObject.formatted_address;
  updateQuery(query);
  var address = "";
  if (addressObject.address_components) {
    address = [
      (addressObject.address_components[0] &&
        addressObject.address_components[0].short_name) ||
        " , ",
      (addressObject.address_components[1] &&
        addressObject.address_components[1].short_name) ||
        " , ",
      (addressObject.address_components[2] &&
        addressObject.address_components[2].short_name) ||
        " , ",
    ].join(", ");
  }
  var completeAddress = addressObject.name + ", " + address;
  console.log(completeAddress);
  console.log("Latitude: " + addressObject.geometry.location.lat());
  console.log("Longitude: " + addressObject.geometry.location.lng());

  /// heres where am trying to update state of coordinates when a place is changed
 setCoordinates({
   lat: addressObject.geometry.location.lat(),
   lng: addressObject.geometry.location.lng()

 })
} 

下面的主要功能是加载use效果中的映射脚本。

function Storelocation({ setTab }) {
  const [query, setQuery] = useState("");

  const autoCompleteRef = useRef(null);

  const [address, setAddress] = React.useState("");
  const [coordinates, setCoordinates] = React.useState({
    lat: null,
    lng: null
  });

  useEffect(() => {
    loadScript(
      `https://maps.googleapis.com/maps/api/js?key=AIzaSyCT2wFvkG_abY&libraries=places`,
      () => handleScriptLoad(setQuery, autoCompleteRef)
    );
  }, []);

return (
 <input
              className=""
              required
              placeholder="address"
              ref={autoCompleteRef}
              onChange={(event) => {
                setQuery(event.target.value)
              }}
             defaultValue={query}
            ></input>

);
}

如何使用这种方式更新状态，即从另一个函数更新状态

Answer 1

您可以将一个函数从stateful组件传递给您的子组件，该子组件使用setState为您管理状态更改。