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

Question

我是运行客户端和服务器设置（反应和 axios api 调用）我想了解如何在 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;

Answer 1

您可以将 data 数组作为 data 属性传递给子组件。确保组件名称中的第一个字符也大写，否则将无法正常工作。

组件需要呈现单个顶级元素，因此您可以例如在子组件中渲染一个 div，其中包含 JSON 字符串化 data 道具。

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

首先确保你uppercase是ChildComponent的第一个字母。如果你想传递数据，你应该将该对象作为属性添加到 component，然后通过 this.props 访问它。此外，您还需要呈现单个顶部元素，如果您不需要 div 或任何其他 html 元素，则可以用 React.Fragment.

包装它

关于 data，如果它是一个数组，您可以简单地 map 通过它和 return 您想要查看的数据，如果您希望整个对象显示为字符串，您可以使用 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>
    );
  }
}

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

How do I pass this.data through to other components with React and Axios

javascript

client-server

reactjs

axios