Как я могу установить значение по умолчанию после действий в useEffect при использовании пользовательских хуков - PullRequest
Новая
       5

Как я могу установить значение по умолчанию после действий в useEffect при использовании пользовательских хуков

0 голосов
/ 12 марта 2020

Я использую React с Hooks и Redux Saga. Как только страница отрисована, useEffect работает и предпринимает действия (получение информации о компании), а затем эта страница перерисовывается. Затем переменная selCompany из rootState содержит данные. Но такие переменные, как name и location, которые используются с useInput, не устанавливают initialData из данных selCompany. Как я могу установить значение по умолчанию в useInput (пользовательские хуки) после действий в useEffect? ​​

Вот пользовательские хуки, которые я использую. 

/*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

1 Ответ

0 голосов
/ 12 марта 2020

вы можете установить 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];
    }
...