Javascript 为什么ReactJS仅在本地主机上以图表形式呈现数据值？

我在node.js和EXPRESS上创建了Restful API

当其他用户试图用JSON和我的本地ip地址查看数据时，一切正常

当其他用户尝试使用我的本地ip地址打开我的应用程序时，图表为空

当我打开我的应用程序时，图表中充满了数据值

可能是我在渲染时出错或。。。我不知道

我的代码：

import React from 'react';
import Select from "react-dropdown-select";
//import Calendar from 'react-calendar';


import './aladin.css';
import {
    ComposedChart,
    Bar,
    BarChart,
    Area,
    Line,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip,
    Legend
} from 'recharts';

class Aladin extends React.Component {


    state = {
        date: new Date(),
    }

    onChange = date => this.setState({ date })

    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            dataAPI: null,
            temp: null,
            dats: null,
        };
    }


    async componentDidMount() {
        const url = "http://localhost:8000/?date=2019-10-20&station=41027&daysForward=2";
        const response = await fetch(url);
        let data = await response.json();
        this.setState({ dataAPI: data.aladinModel[0], loading: false });
        this.setState({ temp: data.aladinModel[0], loading: false });
        this.setState({ dats: data.aladinModel[0], loading: false });
        //console.log(this.state.temp[1].TA);
        //console.log(this.state.dats[1].DATS);
        //console.log(this.state.date);
    }

    render() {

        return (
            <div className="grid-container-aladin">

                <div className="grid-all-items">

                    <div className="header-aladin">
                        <div className="select">

                            <Select />
                            <Select />
                        </div>
                        <p><b>TA - Температура с данни на 3 часа, RH - Влажност на въздуха с данни от 3 часа, WS - Скорост на вятъра с данни от 3 часа.</b></p>
                        <p><b>SR - Сняг с данни на 3 часа, RR - Дъжд с данни от 3 часа, DATS - Дата избрана от потребителя.</b></p>
                        <ComposedChart width={800} height={400} data={this.state.dats} margin={{
                            top: 20, right: 0, left: 0, bottom: 20,
                        }}>
                            <CartesianGrid stroke='#f5f5f5' />
                            <XAxis dataKey="DATS" />
                            <YAxis />
                            <Tooltip />
                            <Legend />
                            <Area type='monotone' dataKey='TA' fill='#f56200' stroke='#f56200' />
                            <Line type="monotone" dataKey="RH" stroke="#8884d8" />
                            <Bar dataKey='WS' barSize={20} fill='#00ff0d' />
                            <Bar dataKey='SR' barSize={20} fill='#f70000' />
                            <Bar dataKey='RR' barSize={20} fill='#003cff' />
                            <Bar dataKey="DATS" stackId="a" fill="#000000" />
                        </ComposedChart>
                    </div>



                    <div className="grid-item-aladin">
                        <p><b> ТА - Температура с данни на 3 часа:<br />DATS - Дата избрана от потребителя:</b></p>
                        <BarChart
                            width={800}
                            height={400}
                            data={this.state.dats}
                            margin={{
                                top: 20, right: 0, left: 0, bottom: 20,
                            }}
                        >
                            <CartesianGrid strokeDasharray="3 3" />
                            <XAxis dataKey="DATS" />
                            <YAxis />
                            <Tooltip />
                            <Legend />
                            <Bar dataKey="TA" stackId="a" fill="#f56200" />
                            <Bar dataKey="DATS" stackId="a" fill="#303030" />
                        </BarChart>
                    </div>
                    <div className="grid-item-aladin">
                        <p><b> WS - Скорост на вятъра с данни на 3 часа:<br />DATS - Дата избрана от потребителя:</b></p>
                        <BarChart
                            width={800}
                            height={400}
                            data={this.state.dats}
                            margin={{
                                top: 20, right: 0, left: 0, bottom: 20,
                            }}
                        >
                            <CartesianGrid strokeDasharray="3 3" />
                            <XAxis dataKey="DATS" />
                            <YAxis />
                            <Tooltip />
                            <Legend />
                            <Bar dataKey="WS" stackId="a" fill="#f56200" />
                            <Bar dataKey="DATS" stackId="a" fill="#303030" />
                        </BarChart>
                    </div>
                    <div className="grid-item-aladin">
                        <p><b> RH - Влажност на въздуха с данни на 3 часа:<br />DATS - Дата избрана от потребителя:</b></p>
                        <ComposedChart width={800} height={400} data={this.state.dats}
                            margin={{
                                top: 20, right: 0, left: 0, bottom: 20,
                            }}
                        >
                            <XAxis dataKey="DATS" />
                            <YAxis />
                            <Tooltip />
                            <Legend />
                            <CartesianGrid stroke='#f5f5f5' />
                            <Area type='monotone' dataKey='RH' fill='#8884d8' stroke='#8884d8' />
                            <Bar dataKey="DATS" stackId="a" fill="#303030" />
                        </ComposedChart>
                    </div>
                    <div className="grid-item-aladin">
                        <p><b> APRESS - Атм. налягане с данни на 3 часа:<br />DATS - Дата избрана от потребителя:</b></p>
                        <ComposedChart width={800} height={400} data={this.state.dats}
                            margin={{
                                top: 20, right: 0, left: 0, bottom: 20,
                            }}
                        >
                            <XAxis dataKey="DATS" />
                            <YAxis />
                            <Tooltip />
                            <Legend />
                            <CartesianGrid stroke='#f5f5f5' />
                            <Area type='monotone' dataKey='APRES' fill='#8884d8' stroke='#8884d8' />
                            <Bar dataKey="DATS" stackId="a" fill="#303030" />
                        </ComposedChart>
                    </div>
                    <div className="grid-item-aladin">
                        <p><b> RR - Валеж с данни на 3 часа:<br />DATS - Дата избрана от потребителя:</b></p>
                        <BarChart
                            width={800}
                            height={400}
                            data={this.state.dats}
                            margin={{
                                top: 20, right: 0, left: 0, bottom: 20,
                            }}
                        >
                            <CartesianGrid strokeDasharray="3 3" />
                            <XAxis dataKey="DATS" />
                            <YAxis />
                            <Tooltip />
                            <Legend />
                            <Bar dataKey="RR" stackId="a" fill="#4287f5" />
                            <Bar dataKey="DATS" stackId="a" fill="#303030" />
                        </BarChart>
                    </div>
                    <div className="grid-item-aladin">
                        <p><b> SR - Сняг с данни на 3 часа:<br />DATS - Дата избрана от потребителя:</b></p>
                        <BarChart
                            width={800}
                            height={400}
                            data={this.state.dats}
                            margin={{
                                top: 20, right: 0, left: 0, bottom: 20,
                            }}
                        >
                            <CartesianGrid strokeDasharray="3 3" />
                            <XAxis dataKey="DATS" />
                            <YAxis />
                            <Tooltip />
                            <Legend />
                            <Bar dataKey="SR" stackId="a" fill="#4287f5" />
                            <Bar dataKey="DATS" stackId="a" fill="#303030" />
                        </BarChart>

                    </div>
                </div>
            </div>
        );
    }
}



export default Aladin;

---

我认为他们看不到数据，因为当他们使用你的IP地址访问你的应用程序时，他们访问的是UI。但是，由于您在代码中提到了

localhost:8000

，并且由于用户界面代码是从他们的浏览器执行的，所以他们将尝试使用此IP地址（locahost==127.0.0.1）而不是您的IP地址获取数据

consturl

变量的值应与客户端正在访问和使用的IP地址相关

首先，您可以尝试以下方法：

const url = "http://" + window.location.hostname + ":8000/?date=2019-10-20&station=41027&daysForward=2";

此更改后，其他用户可能会遇到CORS问题：

跨源资源共享（CORS）是一种机制，它使用额外的HTTP头告诉浏览器，让运行在一个源上的web应用程序访问来自不同源的选定资源。web应用程序从其自身请求具有不同来源（域、协议或端口）的资源时，会执行跨来源HTTP请求

-

---

如果发生这种情况，您可以将后端配置为接受CORS请求。

我认为他们看不到数据，因为当他们使用您的IP地址访问您的应用程序时，他们会访问UI。但是，由于您在代码中提到了

localhost:8000

，并且由于用户界面代码是从他们的浏览器执行的，所以他们将尝试使用此IP地址（locahost==127.0.0.1）而不是您的IP地址获取数据

consturl

变量的值应与客户端正在访问和使用的IP地址相关

首先，您可以尝试以下方法：

const url = "http://" + window.location.hostname + ":8000/?date=2019-10-20&station=41027&daysForward=2";

此更改后，其他用户可能会遇到CORS问题：

跨源资源共享（CORS）是一种机制，它使用额外的HTTP头告诉浏览器，让运行在一个源上的web应用程序访问来自不同源的选定资源。web应用程序从其自身请求具有不同来源（域、协议或端口）的资源时，会执行跨来源HTTP请求

-

如果发生这种情况，您可以将后端配置为接受CORS请求。

@Paul Rey window.location.hostname提供路径名，最好使用主机的IP地址。这是一个本地网络

比如：

@保罗·雷伊 window.location.hostname提供路径名，最好使用主机的IP地址。这是一个本地网络

比如：

---

正如其他用户所提到的，您已经在组件中硬编码了localhost&显然在最终用户机器上没有可用的服务

尝试用url中的ip替换本地主机

const url = "http://localhost:8000/?date=2019-10-20&station=41027&daysForward=2";

您已经在

componentDidMount

方法中对其进行了硬编码

async componentDidMount() {
        const url = "http://<Ip here>:8000/?date=2019-10-20&station=41027&daysForward=2";
        const response = await fetch(url);
        let data = await response.json();

异步组件didmount（）{ const url=“http://:8000/？date=2019-10-20&station=41027&daysForward=2”； const response=等待获取（url）； 让data=wait response.json（）；

---

正如其他用户所提到的，您已经在组件中硬编码了localhost&显然在最终用户机器上没有可用的服务

尝试用url中的ip替换本地主机

const url = "http://localhost:8000/?date=2019-10-20&station=41027&daysForward=2";

您已经在

componentDidMount

方法中对其进行了硬编码

async componentDidMount() {
        const url = "http://<Ip here>:8000/?date=2019-10-20&station=41027&daysForward=2";
        const response = await fetch(url);
        let data = await response.json();

异步组件didmount（）{ const url=“http://:8000/？date=2019-10-20&station=41027&daysForward=2”； const response=等待获取（url）； 让data=wait response.json（）；

---

我更新我的问题。你能用这个常量给我举个例子吗？我可以把这部分代码放在哪里？好吧，你的react代码中已经有这个常量了。在

async componentDidMount

方法中。你只需要用我的示例更改它的值并测试它：）我更新我的问题。你能用这个常量给我举个例子吗？Wh我可以把这部分代码放在哪里？好吧，你的react代码中已经有了这个常量。在

异步组件didmount

方法中。你只需要用我的示例更改它的值并测试它：）我可以把这个常量放在哪里？你能给我举个例子吗..我同意测试，但是如果OP想要发布它的应用程序，他会使用主机名而不是IP地址。我可以把这个常量放在哪里？请给我举个例子。我同意测试，但如果OP想要发布它的应用程序，他会使用主机名而不是IP地址。工作完美。每台电脑的每一个地方：谢谢大家。工作完美。每台电脑的每一个地方：谢谢大家。。