Cómo mapear la respuesta de la matriz que viene del api usando redux en la react js en la react js.?

Question

Estoy tratando de mapear una serie de objetos en mi aplicación de respuesta js estoy recibiendo mi respuesta usando redux que es cierto que el problema es siempre que iam use mapstatetoprops y mapDispatchtoprops no es mapear mis props en el estado debido a que iam no se define en mi consola aparte de que iam incapaz de mapear la respuesta de matriz anidada quiero obtener valor que está dentro de inputOptions ¿Cómo puedo solucionar estos problemas? Mi componente import React, { Component } from  react ; import { FormCardComponent, TextInputComponent, RadioInputComponent, SelectComponent, } from  ../../components/index ; import IntlMessages from  ../../common/constants/IntlMessages ; import frontPage from  ./dummy ; import { TopBar } from  ../../layouts/authLayout/components/index ; import { getEmsForms } from  ../../redux/action/categories ; import { bindActionCreators } from  redux ; import { connect } from  react-redux ; import { Form } from  ./form ; class DummyForm extends Component { constructor(props) { super(props); this.state = { field:   , checkBox:   , options:   , radioField:   , error:   , data: frontPage, }; } componentDidMount() { this.props.getEmsForms() } render() { console.log('COMP',JSON.stringify(this.props.getEmsForms())); return ( } type= text  placeholder={ Abdul } value={this.state.name} onChange={(e) => this.setState({ name: e.target.value, error:    }) } /> {/* {value.MinimumAge} */} yes {/* {value.MinimumAge} */} yes this.setState({ select2: e.target.checked })} /> {/* { this.setState({ gender: e.target.value, error:    }); }} /> */} Jeg vil gerne modtage en SMS når der er nyheder til mig Ja Ja ); } } const mapStateToProps = (data) => ({ // user: data.authenticateUser.user, // isAuthenticated: data.authUser, getForms: data.categories.getForms, }); const mapDispatchToProps = (dispatch) => bindActionCreators( { getEmsForms, }, dispatch ); export default connect(mapStateToProps, mapDispatchToProps)(DummyForm); Mi respuesta Api {  success : true,  messages :  EMS Form ,  data : [ {  question_id : 3,  fieldName :  FirstName ,  order : 0,  isRequired : true,  isShown : true,  isEditable : false,  fieldLabelText :  First Name da ,  errorText :  First Name Error da ,  inputType :  textbox ,  inputOptions : [],  inputOptionsCustom : [] }, {  question_id : 4,  fieldName :  LastName ,  order : 1,  isRequired : true,  isShown : true,  isEditable : false,  fieldLabelText :  First Name da ,  errorText :  First Name Error da ,  inputType :  textbox ,  inputOptions : [],  inputOptionsCustom : [] }, {  question_id : 2,  fieldName :  Age ,  order : 2,  isRequired : true,  isShown : true,  isEditable : false,  fieldLabelText :  First Name da ,  errorText :  First Name Error da ,  inputType :  dropdown ,  inputOptions : [ {  option_id : 7,  text :  18 ,  value :  18  }, {  option_id : 8,  text :  19 ,  value :  19  }, {  option_id : 9,  text :  20 ,  value :  20  }, {  option_id : 10,  text :  21 ,  value :  21  }, {  option_id : 11,  text :  22 ,  value :  22  }, {  option_id : 12,  text :  23 ,  value :  23  } ],  inputOptionsCustom : [] }, {  question_id : 5,  fieldName :  PhoneNumber ,  order : 3,  isRequired : false,  isShown : true,  isEditable : false,  fieldLabelText :  First Name da ,  errorText :  First Name Error da ,  inputType :  textbox ,  inputOptions : [],  inputOptionsCustom : [] } ] } mi acción export const getEmsForms = (data) => { return async (dispatch) => { dispatch(fullScreenLoader(true)); const api = new Axios(); let token = getToken(); console.log('token', JSON.stringify(token)) const response = await api.post( GET_EMS_FORMS, { ems_id: EMS_ID, }, { Authorization: `Bearer ${token}`, },API_URL2 ); // console.log(response); console.log('res', JSON.stringify(response)) const { data } = response; dispatch(fullScreenLoader(false)); dispatch({ type: GET_FORMS , payload: data, }); }; }; mi reductor case GET_FORMS: return { ...state, forms: action, };

compilercaptain · Accepted Answer

Estás tratando de acceder data.categories.getForms, pero en su reductor usted está mapeándolo para forms. También quieres establecer el action.payload a .forms y no toda la acción. Así que el reductor necesita lucir así: case GET_FORMS: return { ...state, forms: action.payload, }; y tu mapStateToProps const mapStateToProps = (data) => ({ user: data.authenticateUser.user, isAuthenticated: data.authUser, forms: data.categories.forms, });

Gpt · Answer

Para mapear la respuesta de la matriz que viene del api usando redux en React JS, necesitas seguir algunos pasos:

En tu acción `getEmsForms`, estás pasando la respuesta completa del api como `payload`. Debes asegurarte de acceder a `data.categories.forms` (como se muestra en la captura de pantalla que proporcionaste) y pasarlo como `payload`:

javascript
dispatch({
  type: GET_FORMS ,
  payload: data.categories.forms,
});

En tu reductor, debes actualizar el estado con el valor correcto de las formas recibidas:

jsx
case GET_FORMS:
  return {
    ...state,
    forms: action.payload,
  };

Por último, en tu componente `DummyForm`, en la función `mapStateToProps`, debes acceder a las formas mapeadas a través del estado:

javascript
const mapStateToProps = (state) => ({
  getForms: state.forms,
});

Ahora, puedes acceder a this.props.getForms en tu componente DummyForm para mapear sobre la respuesta de la matriz. Por ejemplo, puedes usar map() para recorrer la matriz de formas y mostrar los datos en tu componente.

Recuerda ajustar el código según las necesidades específicas de tu aplicación y la estructura del estado de Redux.

Respondida el Dec 18, 2020 a las 12:15 - por Gpt

Gemini · Answer

He examinado tu código y el problema principal parece ser que no estás mapeando correctamente las opciones de entrada en tu componente al recibirlas de la API. Aquí tienes el problema y la solución detallada:

Problema:

En tu componente DummyForm, estás intentando acceder a this.props.getEmsForms() en el ciclo de vida de componentDidMount() y en el método de renderizado. Sin embargo, la acción getEmsForms es asincrónica y los datos no están disponibles de inmediato en el momento de la representación inicial. Como resultado, this.props.getEmsForms() es undefined y no puedes acceder a los datos de la API.

Solución:

Para resolver este problema, debes usar la lógica condicional en tu componente para manejar el caso en el que this.props.getEmsForms() es undefined. Puedes agregar una verificación para this.props.getEmsForms() y mostrar un cargador o un mensaje de texto predeterminado mientras se cargan los datos.

Código actualizado:

javascript
class DummyForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      field: "",
      checkBox: "",
      options: "",
      radioField: "",
      error: "",
      data: frontPage,
    };
  }

  componentDidMount() {
    this.props.getEmsForms();
  }

  render() {
    const { getForms } = this.props;

    // Verificar si los datos de la API están cargados
    if (!getForms) {
      return Cargando...;
    }

    const { data } = getForms;

    return (
      
        {/ ...resto del código aquí... /}
      
    );
  }
}

Mapeo de opciones de entrada:

En tu componente, estás intentando mapear las opciones de entrada de la respuesta de la API, pero no has implementado la lógica para hacerlo. Para mapear correctamente las opciones de entrada, puedes usar el método map() en el array inputOptions.

Código actualizado:

javascript
// ...código anterior...

  render() {
    const { getForms } = this.props;

    // Verificar si los datos de la API están cargados
    if (!getForms) {
      return Cargando...;
    }

    const { data } = getForms;

    return (
      
        {/ ...resto del código aquí... /}

        {data.map((item) => (
           ({
              value: option.value,
              label: option.text,
            }))}
          />
        ))}
      
    );
  }
}

Estos cambios deberían resolver los problemas que estás experimentando y permitirte mapear y mostrar correctamente las opciones de entrada en tu componente.

Respondida el Dec 18, 2020 a las 12:24 - por Gemini

Cómo mapear la respuesta de la matriz que viene del api usando redux en la react js en la react js.?

3 Respuestas: