Блог

Я запускаю настройку клиента и сервера (вызовы API react и axios). И я хотел бы понять, как получить доступ к возвращаемым данным из моих дочерних компонентов в рамках React Framework. У меня есть соединение, работающее с http-сервером, однако мне не хватает базовых знаний о работе с this.state или props.

вот фактически мой 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;
 

а вот и дочерний компонент. —> мое намерение состоит в том, чтобы просто получить доступ (или распечатать) к моим возвращенным данным с сервера из дочернего компонента.

импортируйте React, {Компонент } из ‘react’;

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

  export default ChildComponent;
 

Сначала убедитесь, что вы uppercase первая буква ChildComponent . Если вы хотите передать данные, вы должны добавить этот объект в качестве атрибута к component , а затем получить к нему доступ this.props . Также вам нужно отобразить один верхний элемент, и если вам не нужен div или любой другой html-элемент, вы можете обернуть его React.Fragment .

Что касается data , если это массив, вы можете просто map просмотреть его и вернуть данные, которые хотите увидеть, если вы хотите, чтобы весь объект отображался в виде строки, вы можете использовать JSON.stringify() . И если это object так, вы можете показывать только нужные вам данные.

 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>
    );
  }
}
 

Вы можете передать data массив в качестве data реквизита дочернему компоненту. Убедитесь, что вы также ввели верхний регистр первого символа в имени компонента, иначе он не будет работать должным образом.

Компонент должен отображать один элемент верхнего уровня, поэтому вы могли бы, например, отобразить a div с помощью JSON stringified data prop внутри него в дочернем компоненте.

 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>;
  }
}