Как передать ответ в другой компонент?

Question

[nano_e_t_4]

Всем привет

На фронте почти никогда не писал ничего, так что не судите строго, только учусь

есть компонент, кнопка, через которую я получаю данные с сервера:

const baseURL = "http://localhost:4000/test";
import React from 'react';
import axios from 'axios';
import ImageComponent from "./imageComponent";

class ButtonComponent extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            lalka: '',
            isLoading: false,
        };
        this.click = this.click.bind(this);
    }

    click() {

        this.setState({ isLoading: true });

        axios.get(baseURL, )
            .then((response) => {
                this.setState({ lalka : response.data });
            })
            .catch((err) => {
                console.log(err);
            });
    }

    render() {
        return  (
            <div>
                <button onClick={this.click} > click me </button>
            </div>
        );
    }
}

export default ButtonComponent;

ответ, который приходит с сервера мне нужно отображть в другом компоненте

import React, { Component } from 'react';

class ImageComponent extends Component {
    render() {
        return (
            <React.Fragment>
                <p>{this.props.data}</p>
            </React.Fragment>
        );
    }
}

export default ImageComponent;

подскажите пожалуйста, кто знает, как это сделать?

Answer 1

[xareyli]

Пусть кнопка в props принимает callback, который она будет вызывать, когда данные получены и будет в аргументы передавать эти данные. Callback нужно создать в том компоненте, в котором хочешь получить данные и в этом callback устанавливать состояние с данными

Comments

[nano_e_t_4]

ну, я вроде так и сделал:

const baseURL = "http://localhost:4000/test";
import React from 'react';
import axios from 'axios';
import ImageComponent from "./imageComponent";

class ButtonComponent extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            lalka: '',
            isLoading: false,
        };
        this.click = this.click.bind(this);
    }
    onTrigger = (data) => {
        this.props.parentCallback(data);
    }


    click() {

        this.setState({ isLoading: true });

        axios.get(baseURL, )
            .then((response) => {
                this.onTrigger(response.data)
            })
            .catch((err) => {
                console.log(err);
            });
    }

    render() {
        return  (
            <div>
                <button onClick={this.click} > click me </button>
            </div>
        );
    }
}

export default ButtonComponent;

import React, { Component } from 'react';
import ButtonComponent from "./customBtn";

class ImageComponent extends Component {
    constructor(props){
        super(props);
    }

    state = {
        name: "",
    }


    handleCallback = (childData) =>{
        this.setState({name: childData})
    }

    render() {
        const {name} = this.state;
        return(
            <div>
                <ButtonComponent parentCallback = {this.handleCallback} />
                {name}
            </div>
        )
    }
}

export default ImageComponent;

но пока не совсем понимаю, как теперь сделать так, чтобы родительский объект (кнопка) не отображался дважды

[xareyli]

nano_e_t_4, хм, у меня всё запустилось правильно, можешь больше рассказать про ошибку?

[nano_e_t_4]

да все норм, я просто в App выводил оба компонента и не поправил )) так что все норм работает, спасибо большое