Question

我正在运行客户端和服务器设置（react和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道具传递给子组件。确保您还将组件名称中的第一个字符也大写，否则将无法正常工作。

一个组件需要呈现一个顶级元素，因此您可以例如在子组件中使用JSON字符串化的div属性渲染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访问它。另外，您还需要呈现单个top元素，如果不需要div或任何其他html元素，则可以用React.Fragment包装它。

关于data，如果它是一个数组，则可以简单地map遍历它并返回要查看的数据，如果要将整个对象显示为字符串，则可以使用{{ 1}}。如果是JSON.stringify()，则您只能显示所需的数据。

object

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

2 个答案: