const CustomerListView = () => {
const classes = useStyles();
const [tableData, setTableData] = useState();
const [detailData, setDetailData] = useState();
const [selected, setSelected] = useState([]);
const [addUser, setAddUser] = useState();
const [editUser, setEditUser] = useState();
const [inputRead, setInputRead] = useState();
const [selClear, setSelClear] = useState(false);
const { data: userType } = useQuery(USR_TP_CD);
return (
<Page className={classes.root} title="Customers">
<Container maxWidth={false}>
<AdminUserBar
setSelected={setSelected}
setAddUser={setAddUser}
setEditUser={setEditUser}
setTableData={setTableData}
setInputRead={setInputRead}
setSelClear={setSelClear}
userType={userType}
/>
<Box mt={1}>
<AdminUserTable
setDetailData={setDetailData}
setInputRead={setInputRead}
setAddUser={setAddUser}
setEditUser={setEditUser}
//현재 값
selected={selected}
addUser={addUser}
tableData={tableData}
selClear={selClear}
editUser={editUser}
/>
</Box>
<Box mt={1}>
<AdminUserDetail
setAddUser={setAddUser}
setEditUser={setEditUser}
//현재 값
userType={userType}
detailData={detailData}
inputRead={inputRead}
/>
</Box>
</Container>
</Page>
);
};
export default CustomerListView;
const Toolbar = ({
className,
setTableData: postTableData,
setSelected,
setAddUser,
setEditUser,
userType,
setSelClear,
setInputRead,
...rest
}) => {
const { register, handleSubmit } = useForm(); // 인풋 폼 전송시 인풋 값 받는 함수 (react-hook-form 라이브러리)
const [param, setParam] = useState(); // 유저 조회시 POST 보내는 값
const [selectValue, setSelectValue] = useState(''); // 유형 선택시 해당 값 상태
const activeParam = { PG_CNT: 10, PG_IDX: 0 }; // 유저 조회시 POST 실행시 기본으로 param이랑 같이 보내야하는 값
const { data, refetch } = useQuery(ADMIN_USER, {
returnPartialData: true,
skip: param === undefined,
variables: { param, ver: 'v1' }
});
const onClick = () => {
setInputRead(false);
};
const handleChange = event => {
setSelectValue(event.target.value);
};
console.log(param);
const onSubmit = useCallback(
datas => {
setParam({ ...datas, ...activeParam, USR_TP_CD: selectValue }); //조회 인풋값은 받아와 조회함
setSelClear(true); //조회시 true값을 테이블 컴포넌트로 보내 클릭한 셀 클리어
setSelected([]); // 조회시 select 배열로 저장된 값을 빈배열로 초기화
setAddUser(undefined); // 유저추가후 addUser데이터가 남아있어 조회시 유저가 추가됨. 그래서 undefined로 초기화
setEditUser(undefined); // 유저추가후 editUser데이터가 남아있어 조회시 유저가 추가됨. 그래서 undefined로 초기화
},
[
selectValue,
setAddUser,
setEditUser,
setSelected,
activeParam,
setSelClear,
refetch
]
);
useEffect(() => {
postTableData(data);
}, [postTableData, data]);
function AdminUserDetail({
setAddUser,
detailData: userDetailData,
className,
inputRead,
setEditUser,
userType,
...rest
}) {
const { register, handleSubmit, errors, reset, setValue } = useForm(); // 인풋 폼 데이터 라이브러리
const [addWait, setAddWait] = useState(false); // 저장 전송시 true로 바뀐후 onSubmit 실행후 ADD 뮤테이션 실행
const [editWait, setEditWait] = useState(false); // 저상 전송시 true로 바뀐후 onSubmit 실행후 EDIT 뮤테이션 실행
const [detailData, setDetailData] = useState(); // Index컴포넌트에서 userDetailData받아 useEffect를 통해 디테일 정보받음
const [postFormData, setPostFormData] = useState(); // 인풋값을 받아 ADD_USER 뮤테이션 POST
const [selectValue, setSelectValue] = useState(''); // 유형 선택시 해당 값 상태
const [ReadState, setReadState] = useState(false); // 리셋 및 수정 클릭시 인풋 readOnly 해제
useEffect(() => {
setReadState(inputRead); // Bar 컴포넌트에서 조회시 false값 받아 읽기 전용으로 바꿈
setDetailData(userDetailData); // 테이블 컴포넌트에서 유저 클릭시 데이터 받음
setEditWait(inputRead); // Bar 컴포넌트에서 조회시 false값 받아 유저 수정 기다림 변경
setAddWait(inputRead); //Bar 컴포넌트에서 조회시 false값 받아 유저 추가 기다림 변경
if (detailData !== undefined) {
// 테이블 컴포넌트에서 유저 데이터 받으면 해당 유저 데이터를 각 인풋 value 추가
setValue('USR_ID', detailData?.USR_ID);
setValue('USR_NM', detailData?.USR_NM);
setValue('BLN_NM', detailData?.BLN_NM);
setValue('HP', detailData?.HP);
setValue('EML', detailData?.EML);
setSelectValue(detailData?.USR_TP_CD);
}
}, [userDetailData, detailData, inputRead, userType, setValue]);
//
console.log(selectValue, postFormData);
const [addMutation] = useMutation(ADD_USER, {
variables: {
user: postFormData,
ver: 'v1'
}
});
const [editMutation] = useMutation(EDI_USER, {
variables: {
user: postFormData,
ver: 'v1'
}
});
const handleChange = event => {
setSelectValue(event.target.value);
};
const inputReset = () => {
setReadState(true);
setAddWait(true);
setEditWait(false);
setEditUser(undefined);
reset();
};
const editClick = () => {
if (detailData !== undefined) {
setReadState(true);
setEditWait(true);
setAddWait(false);
setAddUser(undefined);
} else {
toast.error(`✔ 수정을 원하는 유저를 클릭해주세요.`);
}
};
const onSubmit = async data => {
setPostFormData(datas => ({ ...datas, ...data, USR_TP_CD: selectValue }));
setReadState(false);
if (addWait === true) {
try {
setAddUser({ ...data, USR_TP_CD: selectValue });
await addMutation();
setAddWait(false);
} catch (e) {
console.log(e);
setAddWait(false);
}
}
if (editWait === true) {
if (detailData?.USR_ID === data?.USR_ID) {
try {
setEditUser({ ...data, USR_TP_CD: selectValue });
const datass = await editMutation();
console.log(postFormData && postFormData);
setEditWait(false);
} catch (e) {
console.log(e);
setEditWait(false);
}
} else {
toast.error('선택한 유저 ID와 변경 ID가 동일하지 않습니다.');
}
}
};
我是React Admin网站项目的新员工。 我创建了一个页面，该页面使用ag-grid实现添加，删除和修改功能。 但是我想知道useState是否已被过多使用以降低可读性。 如果我可以像这样使用useState，因为这是我第一次在这样的项目上工作，而我没有可以引用数据的项目。 您通常使用这么多useState吗？还是我过度使用它？
第一个组件的useStates充当桥梁。
答案 0 :(得分：1)
当我有许多这样的状态更新时，我更喜欢使用useReducer钩子：
const inputReset = () => {
setReadState(true);
setAddWait(true);
setEditWait(false);
setEditUser(undefined);
reset();
};
这将导致至少5个组件重新呈现。