Reactjs 反应使用状态使用计数 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（）； 常量[inputRead，setInputRead]=useState（）； const[selClear，setSelClear]=使用状态（false）； const{data:userType}=useQuery（USR_TP_CD）； 返回( ); }; 导出默认CustomerListView； 常量工具栏=({ 类名， setTableData:postTableData， 当选后， setAddUser， setEditUser， 用户类型， setSelClear， setInputRead， 休息 }) => { 常量{register，handleSubmit}=useForm（）；//인풋 폼 전송시 인풋 값 받는 함수 （3）钩形라이브러리) const[param，setParam]=useState（）；//유저 조회시 邮递보내는 값 常量[selectValue，setSelectValue]=useState（“”）；//유형 선택시 해당 값 상태 常量activeParam={PG_CNT:10，PG_IDX:0}；//유저 조회시 邮递실행시 기본으로 param이랑 같이 보내야하는 값 const{data，refetch}=useQuery（管理员用户{ 返回部分数据：正确， 跳过：参数===未定义， 变量：{param，ver:'v1'} }); const onClick=（）=>{ setInputRead（假）； }; const handleChange=事件=>{ setSelectValue（事件.目标.值）； }; 控制台日志（param）； const onSubmit=useCallback( 数据=>{ setParam（{…数据，…activeParam，USR_TP_CD:selectValue}）//조회 인풋값은 받아와 조회함 设置清除（真）//조회시 符合事实的값을 테이블 컴포넌트로 보내 클릭한 셀 클리어 设置选定（[]）；//조회시 选择배열로 저장된 값을 빈배열로 초기화 setAddUser（未定义）；//유저추가후 地址用户데이터가 남아있어 조회시 유저가 추가됨. 그래서 未定义로 초기화 setEditUser（未定义）；//유저추가후 编辑用户데이터가 남아있어 조회시 유저가 추가됨. 그래서 未定义로 초기화 }, [ 选择值， setAddUser， setEditUser， 当选后， activeParam， setSelClear， 重新蚀刻 ] ); useffect（（）=>{ postTableData（数据）； }，[postTableData，data]）； 函数AdminUserDetail({ setAddUser， detailData:userDetailData， 类名， 输入， setEditUser， 用户类型， 休息 }) { 常量{register，handleSubmit，errors，reset，setValue}=useForm（）；//인풋 폼 데이터 라이브러리 const[addWait，setAddWait]=useState（false）；//저장 전송시 符合事实的로 바뀐후 提交실행후 添加뮤테이션 실행 const[editWait，setEditWait]=useState（false）；//저상 전송시 符合事实的로 바뀐후 提交실행후 编辑뮤테이션 실행 const[detailData，setDetailData]=useState（）；//索引컴포넌트에서 userDetailData받아 使用效果를 통해 디테일 정보받음 const[postFormData，setPostFormData]=useState（）；//인풋값을 받아 添加用户뮤테이션 邮递 常量[selectValue，setSelectValue]=useState（“”）；//유형 선택시 해당 값 상태 const[ReadState，setReadState]=useState（false）；//리셋 및 수정 클릭시 인풋 只读해제 useffect（（）=>{ setReadState（inputRead）；//条컴포넌트에서 조회시 错误的값 받아 읽기 전용으로 바꿈 setDetailData（userDetailData）；//테이블 컴포넌트에서 유저 클릭시 데이터 받음 setEditWait（inputRead）；//条컴포넌트에서 조회시 错误的값 받아 유저 수정 기다림 변경 setAddWait（inputRead）；//条컴포넌트에서 조회시 错误的값 받아 유저 추가 기다림 변경 if（detailData！==未定义）{ // 테이블 컴포넌트에서 유저 데이터 받으면 해당 유저 데이터를 각 인풋 价值추가 setValue（'USR\u ID'，detailData？.USR\u ID）； 设置值（'USR\u NM'，详细数据？.USR\u NM）； 设置值（'BLN_NM'，详细数据？.BLN_NM）； 设置值（'HP'，详细数据？.HP）； 设置值（'EML'，detailData？.EML）； 设置选择值（详细数据？.USR\u TP\u CD）； } }，[userDetailData，detailData，inputRead，userType，setValue]）； // console.log（selectValue，postFormData）； 常量[addMutation]=使用变异（添加用户{ 变量：{ 用户：postFormData， 版本：“v1” } }); 常量[editMutation]=useMutation（EDI_用户{ 变量：{ 用户：postFormData， 版本：“v1” } }); const handleChange=事件=>{ setSelectValue（事件.目标.值）； }; 常量输入集=（）=>{ setReadState（真）； setAddWait（true）； setEditWait（假）； setEditUser（未定义）； 重置（）； }; 常量编辑单击=（）=>{ if（detailData！==未定义）{ setReadState（真）； setEditWait（true）； setAddWait（false）； setAddUser（未定义）； }否则{ 错误(`✔ 수정을 원하는 유저를 클릭해주세요.`); } }; const onSubmit=异步数据=>{ setPostFormData（datas=>（{…datas，…data，USR_TP_CD:selectValue}））； setReadState（假）； if（addWait==true）{ 试一试{ setAddUser（{…数据，USR\u TP\u CD:selectValue}）； 等待突变（）； setAddWait（false）； }捕获（e）{ 控制台日志（e）； setAddWait（false）； } } 如果（editWait==真）{ if（detailData？.USR\u ID==数据？.USR\u ID）{ 试一试{ setEditUser（{…数据，USR_TP_CD:selectValue}）； const datass=await editprotation（）； log（postFormData&&postFormData）； setEditWait（假）； }捕获（e）{ 控制台日志（e）； setEditWait（假）； } }否则{ toast.error（'선택한 유저 身份证件와 변경 身份证件가 동일하지 않습니다.'); } } };

我是公司的新员工

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가 동일하지 않습니다.');
      }
    }
  };

  const inputReset = () => {
    setReadState(true);
    setAddWait(true);
    setEditWait(false);
    setEditUser(undefined);
    reset();
  };