0

有没有办法将一个状态的状态设置为另一个状态的状态？例如下面在_updateData()...单击geojson状态获取状态newGeojson？目标是能够更改data={geojson}单击按钮（在示例中未显示 Geojson 文件，但假设它们存在于 GeoJSON 和 newGeojson 中。我从 firebase 中提取 JSON，然后在 componentDidMount 中将其转换为 GeoJSON 以创建 geojson状态）。谢谢您的帮助。希望我以正确的方式接近这一点。

import React from 'react';
import ReactMapGL, {Source, Layer} from 'react-map-gl';

class Map extends React.Component {
  state = {
    geojson: null,
    newGeojson: null,
  };

  _updateData() {
    // In here set the state of geojson to the state of newGeojson so the data={geojson} updates on click, something like setState{geojson} = newGeojson
  }

  render() {
    const {geojson} = this.state;

    return (
      <ReactMapGL latitude={37.78} longitude={-122.41} zoom={8}>
        <Source id="my-data" type="geojson" data={geojson}>
          <Layer
            id="point"
            type="circle"
            paint={{
              'circle-radius': 10,
              'circle-color': '#007cbf'
            }} />
        </Source>
        <button onClick={this._updateData()}>Update</button>
      </ReactMapGL>
    );
  }
}
4

1 回答 1

1

像那样：

import React, { useState } from 'react';
import ReactMapGL, {Source, Layer} from 'react-map-gl';

const Map = () => {
  const [geojson, setGeojson] = useState(null)

  const updateData = () => {
    // for example
    fetch('url').then(resp => resp.json()).then(resp => {
      setGeojson(resp.data)
    })
  }

  return (
    <ReactMapGL latitude={37.78} longitude={-122.41} zoom={8}>
      <Source id="my-data" type="geojson" data={geojson}>
        <Layer
          id="point"
          type="circle"
          paint={{
            'circle-radius': 10,
            'circle-color': '#007cbf'
          }} />
      </Source>
      <button onClick={updateData}>Update</button>
    </ReactMapGL>
  );
}

它使用钩子。对于您可能想要的旧语法this.setState({geojson: newGeojson})（https://reactjs.org/docs/react-component.html#setstate）

于 2019-12-30T18:36:12.740 回答