Реагировать на данные ответа API, отображать на другой странице - PullRequest
Новая
       6

Реагировать на данные ответа API, отображать на другой странице

0 голосов
/ 28 апреля 2020

Я новичок в Reactjs и хочу помочь. У меня formik form, когда я нажимаю SUBMIT, он вызывает back end API. После успешного API возвращает некоторый JSON ответ.

Как отобразить ответ JSON в табличном формате на другой странице (новая страница). 

<Formik
      initialValues={initialValues1}
      validationSchema={validation}
      onSubmit={values => {
        console.log("onSubmit", JSON.stringify(values, null, 2));
          //Send Data to BackendAPI, after successful response display in another page
      }}
    >

 ......

 <Form noValidate autoComplete="off">

  .......

  <Button type="submit">SUBMIT</Button>

 </Form>

1 Ответ

0 голосов
/ 28 апреля 2020

Предположим, вы получили ответ в объекте данных. поэтому вы можете установить эти данные в состояние, как показано ниже:

this.setState ({items: data});

Затем вы можете передать это состояние в другой компонент. Полные примеры приведены здесь:

Родительский компонент , который будет в приложении. js

import React, {Component, useEffect, useState} from 'react';
import {PChild} from "./PChild";

export class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {items: []};
    }

    componentDidMount() {
        let data = [];
        data.push({track: { id:1, name: 'Black Sabbath, from the album Black Sabbath (1970)'}});
        data.push({track: { id:2, name: 'Blackfield, from the album Blackfield (2004)'}});
        data.push({track: { id:3, name: 'Bo Diddley, from the album Bo Diddley (1958)'}});
        data.push({track: { id:4, name: 'Damn Yankees, from the album Damn Yankees (1990)'}});
        this.setState({items: data});
    }

    render() {
        return (
            <div>
                <PChild items={this.state.items} name="Khabir"/>
            </div>
        );
    }
}

Дочерний компонент , который используется в Родительский компонент: 

import React, {useEffect, useState} from 'react';

// Parent to Child communication
export class PChild extends React.Component {

    componentDidUpdate() {
        console.log(this.props.items);
        console.log(this.props.name);
    }

    render() {
        return (
            <div>
                {this.props.items.map((item, i) => {
                    return <li key={item.track.id}>
                        {(`Item ${i+1} - ${item.track.name}`)}
                    </li>
                })}
            </div>
        );
    }
}

Обновление: : согласно вашему комментарию я добавил следующий код. 

const Example = (props) => {
    const [credential, setCredential] = useState({});
    const [response, setResponse] = useState({});

    const callUpdateApi = async () => {
        try {
            const response = await axios.put(`https://jsonplaceholder.typicode.com/posts/${id}`, {
                method: 'PUT',
                body: JSON.stringify({
                    email: credential.email,
                    password: credential.password,
                }),
                headers: {
                    "Content-type": "application/json; charset=UTF-8"
                }
            })
                .then(response => setResponse(response.json()))
                .then(json => console.log(json));
            console.warn(response.data);
        } catch (error) {
            console.warn(error);
        }
    };

    return (
        <div>
            <Formik
                initialValues={initialValues1}
                validationSchema={validation}
                onSubmit={values => {
                    console.log("onSubmit", JSON.stringify(values, null, 2));
                    //Send Data to BackendAPI, after successful response display in another page
                    setCredential(values);
                    callUpdateApi();

                }}
            >
                {response ? <PChild items={response}/> : null}
            </Formik>
        </div>
    )
};

export default Example;
...