如何在使用效果中调用功能？

Question

我想在下面提到的函数 onsaveInputValue 使用effeffect ，以便我的组件可以通过 值 ChildInputValue hook每当页面加载时。

    const onSaveInputValue = (value) => {
        setChildInputValue(value);
        console.log(childInputValue);
      };

我试图这样做，但做不到。请引导我。

如果您想查看组件的完整代码，则如下所述。

父组件： -

import { useEffect, useState } from "react";
import Child from "./Child";

const Parent = () => {
  const [childInputValue, setChildInputValue] = useState();
  // useEffect(() => {});
    const onSaveInputValue = (value) => {
    setChildInputValue(value);
    console.log("childVInputValue",value)
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <p>{childInputValue}</p>

      {/* We pass function to the child component. */}
      <Child onSaveInputValue={onSaveInputValue} />
    </div>
  );
};

export default Parent;

儿童组件： -

import React, { useEffect, useState } from "react";
import "./App.css";

function Child(props) {
  const [baseImage, setBaseImage] = useState("");

  const uploadImage = async (e) => {
    const file = e.target.files[0];
    const base64 = await convertBase64(file);
    setBaseImage(base64);
    props.onSaveInputValue(baseImage);
  };

  const convertBase64 = (file) => {
    return new Promise((resolve, reject) => {
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);

      fileReader.onload = () => {
        resolve(fileReader.result);
      };

      fileReader.onerror = (error) => {
        reject(error);
      };
    });
  };


  useEffect(()=>{
    console.log("useeeffect",baseImage)
  })

  return (
    <div >
      <input
        type="file"
        onChange={(e) => {
          uploadImage(e);
        }}
      />
      <br></br>
      <img src={baseImage} height="200px" />
      <hr/>
      
    </div>
  );
}

export default Child;

Answer 1

您可以删除很多东西

import { useEffect, useState } from "react";
import Child from "./Child";

const Parent = () => {
  const [childInputValue, setChildInputValue] = useState(null);

  return (
    <div>
      <h1>Parent Component</h1>
      <p>{childInputValue}</p>

      {/* We pass function to the child component. */}
      <Child onSaveInputValue={setChildInputValue} />
    </div>
  );
};

export default Parent;