как передать значение от одного компонента к другому в реакции js

Question

У меня есть один компонент, в котором у меня есть одна кнопка, и я вызываю одну node js службу для этого. Я получаю ответ от этого сервиса и хочу передать этот ответ следующему компоненту для отображения данных там. Ниже мой компонент, который делает node js вызов.

import { FormGroup } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.css";
import axios from "axios";


export default class Abc extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: {}
        }
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick = (e) => {
        e.preventDefault();
        axios.get(url)
            .then(res => {
                this.setState({
                    data: res.data// I need this variable to pass to next component Pqr where I can use it for display purpose.
                })
                this.props.history.push("/Pqr",{ response:res.data});
            })
    };

    render() {

        return (
            <form >
                <button className="btn btn-info btn-sm" onClick={this.handleClick} style={{ whitespace: 'nowrap' }} >
                    Launch
                    </button>
            </form>
        )

    }
}


My Pqr component code is as below.

import React from "react";

export default class ModelLaunch extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
        }
    }
    render() {
        const state = this.props.location.state
        return (
        <h1>This page will display model Inputs : {state} </h1>
        )
    }
}

Answer 1

Я решил вышеуказанную проблему другим способом. Вместо вызова службы node js для компонента Ab c я просто перенаправляю его на новый компонент и в методе componentDidMount () нового компонента я вызываю службу node js и храню данные в подпорках. Таким образом, у меня есть данные о новом компоненте. Ниже мой обновленный код в компоненте Ab c сейчас.

import { FormGroup } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.css";
import axios from "axios";


export default class Abc extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: {}
        }
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick = (e) => {
        e.preventDefault();
                this.props.history.push("/Pqr");
            })
    };

    render() {

        return (
            <form >
                <button className="btn btn-info btn-sm" onClick={this.handleClick} style={{ whitespace: 'nowrap' }} >
                    Launch
                    </button>
            </form>
        )

    }

И в коде pqr-копонента, как показано ниже

import React from "react";
import axios from "axios";

export default class Pqr extends React.Component{
	constructor(props)
	{
		super(props);
		this.state = {	
			data :[]
		}
	}

	componentDidMount(){

        axios.get(url).then((res) => {
            console.log("res****",res.data)
            this.setState({
                data:res.data
            })
        }).catch((err) =>{
            console.log("err", err)
        })
    }
	render()
	{
  return(
		<h1>This page will display data</h1>
		)
	}
}

Answer 2

Я вижу, что вы меняете маршрут (с помощью реакции-маршрутизатора?).

Помните, что this.setState это asyn c и указывает c для вашего компонента, когда вы вызываете this.props.history.push('/Pqr') , возможно this.state.data еще не обновлено.

Чтобы поделиться этими данными через разные routes в одном и том же реактивном проекте, я действительно знаю, что вы можете:

• Сохраните его на window.localStorage, а затем перейдите на следующий маршрут здесь есть учебное пособие

• Используйте контексты реакции для обмена данными между компонентами (если вы не перезагружаете страницу)

• Отправка данных по маршрутам с реакцией маршрутизатора, , как описано здесь

Если это не так, и вы просто хотите передать свойство вниз или выше дерева иерархии, в дополнение к комментариям выше, возможно, это может помочь:

Как вы, вероятно, знаете, проекты реагирования составляются компонентов, которые объединены для работы определенным образом c. В приведенном ниже примере есть два компонента (отец и ребенок)

import React from 'react';

// We can say that this component is "below" Father
function Child(props) {
  return (
    <button>
      Hey, I'm a button!
    </button>
  );
}

// We can say that this component is "above" Child
function Father(props) {
  return (
    <div>
      <Child />
    </div>
  );
}

Я не смог найти в предоставленном коде / вопросе один компонент child, может быть, вы забыли написать его?

Если ответ «да», я создам вымышленный компонент с именем ... FictionalComponent (я гений!) И передам данные о состоянии как свойство с именем ... data.

Чтобы передать это свойство, если это так, вам просто нужно обновить метод рендеринга, чтобы он выглядел следующим образом:

  render() {
    return (
      <form >
        <button 
          className="btn btn-info btn-sm" 
          onClick={this.handleClick} 
          style={{ whitespace: 'nowrap' }} 
        >
          Launch
          <FictionalComponent data={this.state.data} />
        </button>
      </form>
    )
  }

Таким образом, когда this.state.data изменяется FictionalComponent будет перерисовано с новым значением data.

Но, возможно, вы захотите выполнить обратную операцию, и вам нужно будет передать this.state.data компоненту выше Abc, отображается там при нажатии кнопки.

Для ее достижения вам необходимо иметь компонент «Отец» для вашего Abc, компонент «Отец» должен обеспечить обратный вызов onDataChanged для захвата события. , Этот обратный вызов получит data и обработает его.

В этом случае я создам еще один компонент, который будет выше вашим Abc. Я назову это ... AboveAbcComponent, идеально!

...

class AboveAbcComponent extends React.Component {
  constructor(props) {
    this.state = {
      dataFromChild: null
    };

    this.onDataChanged = this.onDataChanged.bind(this);
  }

  onDataChanged(dataReceived) {
    console.log("Yey! It works!");
    this.setState({ dataFromChild: dataReceived });
  }

  render() {// Just the passed props changes here
    ...
      <Abc 
        onDataChanged={this.onDataChanged}
      />
    ...
  }
}

export default class Abc extends React.Component {
  constructor(props) { ... } // No changes here

  handleClick = (e) => {
    e.preventDefault();
    axios.get(url)
      .then(res => {
        this.setState({
          data: res.data
        });

        this.props.onDataChanged(res.data);

        this.props.history.push("/Pqr"); // I really didn't understand Why this push is here... but ok
      })
  };

  render() { ... } // No changes here
}

Надеюсь, это поможет, весело провести время!