javascript - 从 Node 端点获取数据并传递到 React 前端

Question

我正在访问来自本地 Node 服务器的 get 请求，并将数据接收到 React 代码中，但我不知道如何使用接收到的数据。 React 和 Node 的完全初学者。

const https = require("https");
const url =
"http://localhost:9001/products";
 https.get(url, res => {
    res.setEncoding("utf8");
    let body = ""
    res.on("data", data => {
        body += data;
    });
    res.on("end", () => {
      console.log(
          body
      );
    });
});

控制台显示返回的所有数据，但现在我想使用该数据，将其传递到要导出的成本中

export default data;

每当我尝试警告 cont url 代码之外的正文时，它都会显示未定义。如何抓取数据并导出？

Answer 1

Container Component 的完美用例:

您应该在父/容器组件中进行 api 调用，然后将响应数据存储在状态中。然后，您可以将数据作为 props 传递给任何子级:

const https = require("https");

export default class FetchData extends Component {

    constructor () {
        super();

        this.state = {
            data: null
        };
    }

    componentDidMount() {
        this.fetchData();
    }

    fetchData = () => {
        const url = "http://localhost:9001/products";
        https.get(url, res => {
            res.setEncoding("utf8");
            let body = ""
            res.on("data", data => {
                body += data;
            });
            res.on("end", () => {
                // Store data to state
                this.setState({
                    data: body
                });
            });
        });
    };

    render() {
        return (
            <div>
                <Child1 data={this.state.data} />
                <Child2 data={this.state.data} />
                <Child3 data={this.state.data} />
            </div>
        )
    }
}