如何使用React和Axios将this.data传递给其他组件

Question

I am running a client and server setup (react and axios api calls) And I would like to understand how to access the returned data from my child components within the React Framework. I have the connection working to the http server, however i lack the foundational knowledge of working with this.state or props.

here is effectively my app.js

import React, { Component } from 'react';
import axios from 'axios';
import ChildComponent from "./components/childComponent"

class App extends Component {
 state = {
  data: [],
  intervalIsSet : false
};

  componentDidMount() {
    this.getDataFromDb();
    if (!this.state.intervalIsSet) {
      let interval = setInterval(this.getDataFromDb, 10000);
      this.setState({ intervalIsSet: interval });
    }
  }

  getDataFromDb = () => {
    fetch("http://localhost:3001/api/getData")
      .then(data => data.json())
      .then(res => this.setState({ data: res.data }));
  };

 render() {
    const { data } = this.state;
    return (
       <div>
         <childComponent />
       </div>

  );
};
}

export default App;

and here is the child component. --> my intention is to simply access (or print out) my returned data from the server from within the child component.

import React, { Component } from 'react';

class ChildComponent extends React.Component {
    render() {
      return (
            {this.props.data}
      );
    }
  }

  export default ChildComponent;

Answer 1

You can pass down the data array as the data prop to the child component. Make sure you also uppercase the first character in the component name, or it won't work properly.

A component needs to render a single top level element, so you could eg render a div with the JSON stringified data prop inside of it in the child component.

class App extends React.Component {
  // ...

  render() {
    const { data } = this.state;
    return (
      <div>
        <ChildComponent data={data} />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return <div>{JSON.stringify(this.props.data)}</div>;
  }
}

Answer 2

First make sure you uppercase the first letter of ChildComponent . If you want to pass data you should add that object as an attribute to the component , and then access it throught this.props . Also you need to render a single top element, and if you don't need div or any other html element, you can wrap it with React.Fragment .

Regarding to data , if its an array you can simply map through it and return data you want to see, if you want the entire object to show as a string, you can use JSON.stringify() . And if that's an object you can show only data you want.

class App extends React.Component {
  //...
  render() {
    const { data } = this.state;
    return (
      <div>
        <ChildComponent data={data} />
      </div>
    );
  }
}

//for array, ex: data = ["first","name"];
class ChildComponent extends React.Component {
  render() {
    return (
      <React.Fragment>
        {this.props.data.map(item => 
          <p>{item}</p>
        )}
      </React.Fragment>
    );
  }
}

//for object, ex: data = {id: 1, name: 'John'};
class ChildComponent extends React.Component {
  render() {
    const {data} = this.props;

    return (
      <React.Fragment>
        <p>{data.id}</p>
        <p>{data.name}</p>
      </React.Fragment>
    );
  }
}

//for single value (string, int, etc), ex: data = "my name";
class ChildComponent extends React.Component {
  render() {
    return (
      <React.Fragment>
        <p>{this.props.data}</p>
      </React.Fragment>
    );
  }
}

//to show object as a string (could be any object mentioned before)
class ChildComponent extends React.Component {
  render() {
    return (
      <React.Fragment>
        {JSON.stringify(this.props.data)}
      </React.Fragment>
    );
  }
}