如何用 ReactJS 中的变量替换查询参数中的字符串

Question

我有一个项目，我将静态查询作为字符串放在数据库中。

是时候用特定变量替换此字符串中的一个参数了。

import React from "react";
import { Map as LeafletMap, TileLayer, Marker, Popup } from "react-leaflet";
import L from "leaflet";
import {
  ComposedChart,
  Bar,
  Area,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from 'recharts';
import './App.css';


const customMarker = new L.Icon({
  iconUrl: "https://unpkg.com/browse/leaflet@1.5.1/dist/images/marker-shadow.png",
  iconSize: [25, 41],
  iconAnchor: [10, 41],
  popupAnchor: [2, -40]
});

class Map extends React.Component {

  state = {
    date: new Date(),
  }

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

  constructor() {
    super();
    this.state = {
      coords: [
        { lat: 41.19197, lng: 25.33719 },
        { lat: 41.26352, lng: 25.1471 },
        { lat: 44.17828, lng: 22.73807 },
        { lat: 44.18061, lng: 22.83797 },
        { lat: 44.24774, lng: 22.63474 }
      ],
      zoom: 8,
      minZoom: 7,
      maxZoom: 9,
      dats: null,
      loading: true,
      dataAPI: null,
      temp: null,
    };
  }

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

  async componentDidMount() {
    const url = `http://192.168.0.1:8000/?date=2019-10-20&id=4&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 });
  }

  render() {
    const { coords, zoom } = this.state;
    return (
      <LeafletMap
        center={[42.733883, 25.48583]}
        zoom={zoom}
        minZoom={this.state.minZoom}
        maxZoom={this.state.maxZoom}
        style={{ height: "100vh", width: "100vw" }}
      >
        <TileLayer
          attribution='&copy; <a href="http://plovdiv.meteo.bg">НИМХ - Пловдив</a> '
          url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
        />

        {coords.map(({ lat, lng }, index) => (
          <Marker position={[lat, lng]} icon={customMarker} key={index}>
            <div className="leaflet-popup-content">
            <Popup  maxWidth="1000" maxHeight="auto" >

              <div className="chart">
              <br /><br />
              Температура °C
              <ComposedChart width={400} height={200} data={this.state.dats} margin={{
                top: 20, right: 0, left: 0, bottom: 20,
              }}>
                <CartesianGrid stroke='#f5f5f5' />
                <XAxis dataKey="DATS" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Line type="monotone" dataKey="TA" fill='#f70000' stroke="#f56200" />
              </ComposedChart>
              </div>
              <div className="chart">
              <br /><br />
              Скорост на вятъра
              <ComposedChart width={400} height={200} data={this.state.dats} margin={{
                top: 20, right: 0, left: 0, bottom: 20,
              }}>
                <CartesianGrid stroke='#f5f5f5' />
                <XAxis dataKey="DATS" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Bar dataKey='WS' barSize={10} fill='#4287f5' />
              </ComposedChart>
              </div>
              <div className="chart">
              <br /><br />
              Валеж
              <ComposedChart width={400} height={200} data={this.state.dats} margin={{
                top: 20, right: 0, left: 0, bottom: 20,
              }}>
                <CartesianGrid stroke='#f5f5f5' />
                <XAxis dataKey="DATS" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Bar dataKey='RR' barSize={10} fill='#003cff' />
              </ComposedChart>
              </div>
              <div className="chart">
              <br /><br />
              Сняг
              <ComposedChart width={400} height={200} data={this.state.dats} margin={{
                top: 20, right: 0, left: 0, bottom: 20,
              }}>
                <CartesianGrid stroke='#f5f5f5' />
                <XAxis dataKey="DATS" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Bar dataKey='SR' barSize={10} fill='#5df5dc' />
              </ComposedChart>
              </div>

              <div className="chart">
              <br /><br />
              Относителна влажност %
              <ComposedChart width={400} height={200} 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='RH' fill='#8884d8' stroke='#f56200' />
              </ComposedChart>
              </div>
              <div className="chart">
              <br /><br />
              Атмосферно налягане
              <ComposedChart width={400} height={200} 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='APRES' fill='#8884d8' stroke='#f56200' />
              </ComposedChart>
              </div>
              {index + 1} is for popup with lat: {lat} and lon {lng}
            </Popup>
            </div>
          </Marker>
        ))}
      </LeafletMap>
    );
  }
}

export default Map;

在结束标签后的底部</ComposedChart>:

{index + 1} is for popup with lat: {lat} and lon {lng}

我需要索引+1在一个变量中并被替换为：

async componentDidMount() {
        const url = "http://192.168.0.1:8000/?date=2019-10-20&id=HERE&daysForward=2";           
      }

我想要这个变量，因为每次用户点击地图标记时，索引 + 1 是我数据库中的 ID 每次用户点击地图时，它都会改变并会在我的查询中发送不同的 ID。

坐标数组大约有两千行。

我不需要一次所有的数组索引，只需要用户点击并在弹出窗口中看到的那个。

Answer 1

这是一个工作示例：

import React from "react";
import { Map as LeafletMap, TileLayer, Marker, Popup } from "react-leaflet";
import L from "leaflet";
import {
ComposedChart,
Bar,
Area,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend
} from "recharts";
import "./App.css";

const customMarker = new L.Icon({
iconUrl:
    "https://unpkg.com/browse/leaflet@1.5.1/dist/images/marker-shadow.png",
iconSize: [25, 41],
iconAnchor: [10, 41],
popupAnchor: [2, -40]
});

class Map extends React.Component {
state = {
    date: new Date()
};

constructor() {
    super();
    this.state = {
    coords: [
        { lat: 41.19197, lng: 25.33719 },
        { lat: 41.26352, lng: 25.1471 }
    ],
    zoom: 8,
    minZoom: 7,
    maxZoom: 9,
    dats: null,
    loading: true,
    dataAPI: null,
    temp: null
    };
    this.getURL = this.getURL.bind(this);
}

getURL = (id) => `http://192.168.0.1:8000/?date=2019-10-20&id=${id}&daysForward=2`;

async componentDidMount() {    
    const response = await fetch(this.getURL(4));
    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 });
}

render() {
    const { coords, zoom } = this.state;
    return (
    <LeafletMap
        center={[42.733883, 25.48583]}
        zoom={zoom}
        minZoom={this.state.minZoom}
        maxZoom={this.state.maxZoom}
        style={{ height: "100vh", width: "100vw" }}
    >
        <TileLayer
        attribution='&copy; <a href="http://plovdiv.meteo.bg">НИМХ - Пловдив</a> '
        url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
        />

        {coords.map(({ lat, lng }, index) => (
        <Marker position={[lat, lng]} icon={customMarker} key={index}>
            <div className="leaflet-popup-content">
            <Popup maxWidth="1000" maxHeight="auto">
                <div className="chart">
                <br />
                <br />
                Температура °C
                <ComposedChart
                    width={400}
                    height={200}
                    data={this.state.dats}
                    margin={{
                    top: 20,
                    right: 0,
                    left: 0,
                    bottom: 20
                    }}
                >
                    <CartesianGrid stroke="#f5f5f5" />
                    <XAxis dataKey="DATS" />
                    <YAxis />
                    <Tooltip />
                    <Legend />
                    <Line
                    type="monotone"
                    dataKey="TA"
                    fill="#f70000"
                    stroke="#f56200"
                    />
                </ComposedChart>
                </div>
                {this.getURL(index + 1)} is for popup with lat: {lat} and lon {lng}
            </Popup>
            </div>
        </Marker>
        ))}
    </LeafletMap>
    );
}
}

export default Map;

如何用 ReactJS 中的变量替换查询参数中的字符串

How to replace a string in parameters from query with variables in ReactJS

javascript

leaflet

reactjs

recharts