[英]How can I set default value after actions in useEffect when I use custom hooks
我將 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
您可以在組件安裝時將該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];
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.