获取 axios 调用 reactjs

Question

Below is the response I am getting after doing get call:

{
    "id": “12345”,
    “details”: {
        “name”: “sample doc”,
        “market: “sample market”
    }
}

My Service Method:

ENDPOINTS = {
    product: "/market/product", 
}
     getDetails(
            id: string
          ): Promise<{
            id: string;
          }> {
            const url = `${this.ENDPOINTS.PRODUCT}/${id}/name`;
            return http
              .get(url)
              .then((response) => {
                return response.data;
              })
              .catch((error) => {
                throw error;
              });
          }

My component Method:

getTestingDone = () => {
    this.sampleService
      .getDetails(
        this.props.product.id,
      )
      .then((response) => {
        this.setState({
        });
      })
      .catch((error) => {
        console.log(error);
      });
  };

        <TextInput
          labelText="name"
          type="text"
          name="keyname"
          value = {name}
        />

I want to print the response in this input field. Not sure How to get the response from the server to the UI. Can anyone help me with this.Do i need to make a model class? and return it in response in service method?

Answer 1

constructor() {
  this.state = {
    name: ''
  }
}

getTestingDone = () => {
  this.sampleService
    .getDetails(this.props.product.id)
    .then(({details: {name}}) => {
      this.setState(state => ({...state, name}));
    })
}

render() {
  const { name } = this.state;

  return <TextInput
    labelText="name"
    type="text"
    name="keyname"
    value = {name}/>
}

Answer 2

This is the correct answer for the above question:

constructor(){
    this.state = {
     details: {
          name: "",
          market: "",
        }
    }

    getTestingDone = () => {
      this.sampleService
        .getDetails(this.props.product.id)
        then((response) => {
            this.setState({
              credentials: response.credentials,
            });
        })

      return <TextInput
        labelText="name"
        type="text"
        name="keyname"
        value = {this.state.details.name}/>
    }
    }