如何使用另一状态的onClick设置一个状态的状态

Question

是否有一种方法可以将一个状态的setState与另一状态的State？例如，在下面的_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>
    );
  }
}

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