Получить детали одной строки из API? - PullRequest
Новая
       1

Получить детали одной строки из API?

0 голосов
/ 06 февраля 2020 
I have created a table on UI using react-redux. When I click the single row, I took the userid of the row and pass into getting method but In the saga, it is return type: "GET_PROFILE_FAILED", payload: "Cannot read property 'data' of undefined".

Это пользовательский интерфейс: 

interface Icreate {
  dispatch: Dispatch<any>;
  userData: any;
  props: RouteComponentProps;
}
const Users: React.FC<Icreate> = ({
  dispatch, userData, props
}) => {
  React.useEffect(() => {
    dispatch(getUsersList());
  }, []);

const intialforstate={
  displayDialog: false
}
const userDetails={
  userId:"",
  first_Name:"",
  last_Name:"",
  emailId:"",
  mobileNumber:0,
  descriptionRole:"",
  descriptiontenant:"",
  status:""
}
const intial={
  userID:""
}
const[user,setUser]=useState(userDetails);
  const [state, setState] = useState(intialforstate);
  const [isPageLoaded, setPageLoaded] = useState(false);
  const [tableData, setTableData] = useState([]);
  const [tableData1] = useState([]);
  if (!isPageLoaded && !userData.isLoading && userData.userList.length > 0) {
    setTableData(userData.userList);
    setPageLoaded(true);
  }


  const handlecreate = () => {
    window.location.href = "/createuser";
  }

const onRowSelect=(e:any)=>{
  alert("value");

}
const openDialog=(e:any)=>{
  userData.userID=e.data.userId;
  setTableData(userData.userID);
  dispatch(getUserProfileList(userData));
  //setState({ displayDialog: true })
}
const handleClose=()=>{
  setState({ displayDialog: false });
}

const handleEdit=(event:any)=>{

  event.target.userId=event.target.value;



}
const onIconClick=()=>{
  setState({ displayDialog: true });
}


  return (

    <Panel header="Users Detail">

      <div className="p-grid">
      <Button style={{float:'left'}} label="Add User" icon="pi pi-plus" onClick={handlecreate}/>
        <div className="p-col-12">

                   <DataTable
              value={tableData}
              paginatorPosition="bottom"
              selectionMode="single"
              header="Users"
              paginator={true}
              rows={10}
              responsive={true}
             selection={tableData1} 
             onRowClick={openDialog}

            >


              <Column field="userId" header="User ID" sortable={true} filter={true} />
              <Column field="first_Name" header="First Name" sortable={true} filter={true} />
              <Column field="last_Name" header="Last Name" sortable={true} filter={true} />
              <Column field="emailId" header="Email Id" sortable={true} filter={true} />
              <Column field="mobileNumber" header="Phone_number" sortable={true} filter={true} />
              <Column field="descriptionRole" header="Role" sortable={true} filter={true} />
              <Column field="descriptiontenant" header="Tenant" sortable={true} filter={true} />
              <Column field="status" header="Status" sortable={true} />

            </DataTable>


<Dialog visible={state.displayDialog}  header="Car Details" modal={false} onHide={() => setState({displayDialog: false})}>
  {
                state.displayDialog&&

                  <div className="p-grid p-fluid">
                      <div className="p-col-4" style={{padding:'.75em'}}><label htmlFor="UserId">UserId</label></div>
                      <div className="p-col-8" style={{padding:'.5em'}}>
                          <input id="UserId" onChange={handleEdit} value={user.userId}/>
                      </div>

                      <div className="p-col-4" style={{padding:'.75em'}}><label htmlFor="year">first_Name</label></div>
                      <div className="p-col-8" style={{padding:'.5em'}}>
                          <input id="first_Name" onChange={handleEdit} value={user.first_Name}/>
                      </div>

                      <div className="p-col-4" style={{padding:'.75em'}}><label htmlFor="brand">last_Name</label></div>
                      <div className="p-col-8" style={{padding:'.5em'}}>
                          <input id="last_Name" onChange={handleEdit} value={user.last_Name}/>
                      </div>

                      <div className="p-col-4" style={{padding:'.75em'}}><label htmlFor="color">emailId</label></div>
                      <div className="p-col-8" style={{padding:'.5em'}}>
                          <input id="emailId" onChange={handleEdit} value={user.emailId}/>
                      </div>
                  </div>
              }
  </Dialog>

          </div>
        </div>
    </Panel>
  );
};

const mapStateToProps = (state: any) => {
  const { userData } = state;
  return {
    userData
  };
};

export default connect(mapStateToProps)(Users);

Это действие: 

export const GET_USER_STARTED = "GET_USER_STARTED";
export const GET_USER_COMPLETED = "GET_USER_COMPLETED";
export const GET_USER_FAILED = "GET_USER_FAILED";

export const GET_PROFILE_STARTED = "GET_PROFILE_STARTED";
export const GET_PROFILE_COMPLETED = "GET_PROFILE_COMPLETED";
export const GET_PROFILE_FAILED = "GET_PROFILE_FAILED";

export const SAVE_USER_STARTED = "SAVE_USER_STARTED";
export const SAVE_USER_COMPLETED = "SAVE_USER_COMPLETED";
export const SAVE_USER_FAILED = "SAVE_USER_FAILED";
export interface IUser {
    status: {
        statusCode: number,
        statusDisplay: string,
        statusValue: boolean
    };
    items: Array<any>;
    userInput: {
      id:number,
      user_fk_id:{ emailid:"",firstname: "",lastname:"",password:"",confirmpassword:"",
      roleFkId: { roleId: 0, roleName: "", description: "", status: 0, createdAt: "", createdBy: "", updatedAt: "", updatedBy: "" },
      createdAt:"",createdBy:"",updatedAt:"",updatedBy:""},
      tenant_fk_id:{id:0,tenant_id:"",tenant_name:"",description:"",address1:"",address2:"",country:"",state:"",city:"",zipcode:"",status:0,
      created_at:"",createdBy: "", updatedAt: "", updatedBy: ""},
      first_name:string,
      middle_name:string,
      last_name:string,
      sex:string,
      dob:Date,
      address1:string,
      address2:string,
      country:string,
      state:string,
      city:string,
      zipcode:string,
      email_id:string,
      mobile_number:number,
      createdAt: String 
      ,createdBy: string,
       updatedAt:string, 
       updatedBy: string
    };
    userID: string;
    isLoading: boolean;
    error: string;
}


export const saveUser = (userInput: any) => {
    console.log("userInput"+userInput);
    return {
        type: SAVE_USER_STARTED,
        payload: 'status',
        input: userInput

    };
};

export const getUsersList = () => {
  return {
    type: GET_USER_STARTED,
    payload: 'statusValue'
  };
};

export const getUserProfileList=(userID:any)=>{
  return {
    type: GET_PROFILE_STARTED,
    payload: 'statusValue',
    input: userID
  };
}

Это редуктор: 

import {

    GET_USER_STARTED,
  GET_USER_COMPLETED,
  GET_USER_FAILED,
    SAVE_USER_STARTED,
    SAVE_USER_COMPLETED,
    SAVE_USER_FAILED,
    GET_PROFILE_STARTED ,
 GET_PROFILE_COMPLETED ,
 GET_PROFILE_FAILED 
} from '../actions/CreateUser';

const intialUserData= {
    status: {
        statusCode: 300,
        statusDisplay: "",
        statusValue: true
    },
    items: [],
    userInput: {       
      id:0,
      user_fk_id:{ emailid:"",firstname: "",lastname:"",password:"",confirmpassword:"",
      roleFkId: { roleId: 0, roleName: "", description: "", status: 0, createdAt: "", createdBy: "", updatedAt: "", updatedBy: "" },
      createdAt:"",createdBy:"",updatedAt:"",updatedBy:""},
      tenant_fk_id:{id:0,tenant_id:"",tenant_name:"",description:"",address1:"",address2:"",country:"",state:"",city:"",zipcode:"",status:0,
      created_at:"",createdBy: "", updatedAt: "", updatedBy: ""},
      first_name:"",
      middle_name:"",
      last_name:"",
      sex:"",
      dob:"",
      address1:"",
      address2:"",
      country:"",
      state:"",
      city:"",
      zipcode:"",
      email_id:"",
      mobile_number:0,
      createdAt: "" 
      ,createdBy: "",
       updatedAt:"", 
       updatedBy: ""
    },
    userID:"",
    isLoading: true,
    isFormSubmit: false,
    isLoggedIn: false,
    error: ''
};
export const userData = (state = intialUserData, action: any) => {
    console.log(action.type
        );
    switch (action.type) {

        case GET_USER_STARTED:
      return {
        ...state,
        isLoading: true,
      };
    case GET_USER_COMPLETED:
      return {
        ...state,
        isLoading: false,
        status: action.status,
        userList: action.payload
      };
    case GET_USER_FAILED:
      return {
        ...state,
        isLoading: true,
      };

        case SAVE_USER_STARTED:
           return {
                ...state,
                isLoading: true,    
                isFormSubmit:false,
                userInput: action.input
            };


        case SAVE_USER_COMPLETED:
            console.log("SAVE_USER_COMPLETED "+ action.payload.firstName+"---action"+action);
           // console.log("LOGININPUT"+state.loginInput.userId);
            return {
                ...state,
                isLoading: false,
                isFormSubmit:true,
                status: action.payload
                };

        case SAVE_USER_FAILED:
            return {
                ...state,
                isLoading: true,
            };
            case GET_PROFILE_STARTED:
              return {
                ...state,
                isLoading: true,
                userID: action.input
              };
            case GET_PROFILE_COMPLETED:
              return {
                ...state,
                isLoading: false,
                status: action.status,
                userList: action.payload
              };
            case GET_PROFILE_FAILED:
              return {
                ...state,
                isLoading: true,
              };




        default:
            return state;
    }};

Это код саги: 

export function* getUserProfileList(request: any) {
    try {
      const result = yield call(UserAPI.getUserProfileList,request.input);
      var status = result.data;
      console.log(result);
          yield put({
              type: GET_PROFILE_COMPLETED,
              payload: result.data,
              input: request.input
          });        

      } catch (e) {        
          yield put({ type: GET_PROFILE_FAILED, payload: e.message });
      }
  }

В параметре запроса есть это значение:

тип: «GET_PROFILE_STARTED» полезная нагрузка: «statusValue» вход: статус: неопределенные элементы: [] userInput: {id: 0, user_fk_id: {…}, Tenant_fk_id: {…}, first_name: "", middle_name: "",…} userID: "admin" isLoading: false isFormSubmit: false isLoggedIn: false error: "" Это вызов API: 

public static getUsersList() {

    return Http.axios().get('http://localhost:8096/api/usersdetails')
      .catch((e) => {
        return e.response;
      }) as AxiosPromise<any>;
  }
  public static getUserProfileList(input: any) {
    console.log("userId"+input.user);
    return Http.axios().get('http://localhost:8096/api/user'+input.userID)
      .catch((e) => {
        return e.response;
      }) as AxiosPromise<any>;
  }

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...