从节点端点获取数据并传入反应前端

时间:2018-02-07 15:24:06

标签: javascript node.js reactjs get

我正在从本地节点服务器访问get请求,并且正在接收反应代码中的数据包,但我不知道如何使用接收到的数据。使用react和node完成noob。任何帮助非常感谢

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;

每当我尝试提示连接代码的正文时,它都说未定义。如何获取要导出的数据

感谢

1 个答案:

答案 0 :(得分:0)

Container Component的完美用例:

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

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