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

Question

有没有办法将一种状态的状态设置为另一种状态的状态？例如下面的 _updateData()...单击 geojson 状态获取 newGeojson 的状态？目标是能够在单击按钮时更改 data={geojson}（示例中未显示 Geojson 文件，但假设它们存在于 GeoJSON 和 newGeojson 中。我拉 JSON从 firebase 然后将其转换为 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>
  );
}

它正在使用挂钩。对于旧语法，您可能需要 this.setState({geojson: newGeojson}) (https://reactjs.org/docs/react-component.html#setstate)

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

How to setState of one state using the state of another state onClick

mapbox

reactjs

mapbox-gl-js

react-map-gl

react-component