使用自定义挂钩时，如何在 useEffect 中的操作后设置默认值

Question

我将 React 与 Hooks 和 Redux saga 结合使用。 页面呈现后，useEffect 工作并采取行动（获取公司信息），然后重新呈现此页面。 然后，来自 rootState 的变量 selCompany 有数据。 但是，与 useInput 一起使用的 name 和 location 等变量不会从 selCompany 的数据设置 initialData。 在 useEffect 中执行操作后，如何在 useInput(custom hooks) 中设置默认值？

这是我使用的自定义钩子。

/*useInput.ts*/
import { useState, useCallback } from "react";
// custom hook
export default function useInput(initialValue: string) {
  const [value, setValue] = useState(initialValue);
// after re-rendered, variable [value] is empty string
// but parameter [initialValue] has data
// console.log(initialValue); // 'test'
// console.log(value); // ''

  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
  }, []);
  return [value, handleChange] as [string, typeof handleChange];
}

这是代码

/**CompanyUpdateContainer.tsx */
const CompanyUpdateContainer: React.SFC<RouteComponentProps<MatchParams>> = ({ match }) => {
  const { email } = useSelector((state: RootState) => state.user);
  const { selCompany } = useSelector((state: RootState) => state.company);
  const { id } = match.params;
  const [name, setName] = useInput(selCompany.name);
  const [location, setLocation] = useInput(selCompany.location);
  const [error, setError] = useState<Array<Error>>([]);
  const [imageList, setImageList] = useState<Array<File>>(selCompany.imageList);
  const [loading, setLoading] = useState(false);
  const dispatch = useDispatch();

  console.log(name, location); //after re-render, still values return empty string
  useEffect(() => {
    setLoading(true);
    dispatch(getCompanyDetail({ email, id })); // getComapnyDetail put data on 'selCompany'
    setLoading(false);
    return () => {};
  }, [dispatch, email, id]);
..... some mode code

Answer 1

您可以在组件安装时将该value设置为initialValue

 /*useInput.ts*/
    import {
        useState,
        useCallback,
        useEffect
    } from "react";
    // custom hook
    export default function useInput(initialValue:string) {
        const [value, setValue] = useState(initialValue);

 useEffect(() => {
   setValue(initialValue);
  },[]);

  const handleChange = useCallback((event: React.ChangeEvent <HTMLInputElement > ) => {
       setValue(event.target.value);
        }, []);
        return [value, handleChange] as[string, typeof handleChange];
    }