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

Question

I have a project where I put a static query on the database as a string.

The time has come for one parameter in this string to be replaced by a specific variable.

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;

At the bottom after the close tag </ComposedChart> :

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

I need index + 1 to be in a variable And be replaced in:

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

I want this variable because every time a user clicks on a map marker, index + 1 is ID in my database And every time the user clicks on the map, it changes and will send different id on my query.

The coordinate array is about two thousand lines long.

I don't need all the array indexes at once, just the one that the user clicked and see in the popUp.

Answer 1

Here is an working example:

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;