在React天然中，如何在另一个组件中获得API的状态

Question

我想在fetch.js中获取我的多边形，然后转换为可用格式，并在openstreetmap.js中使用它，但我不知道如何返回数据或在兄弟姐妹组件中使用组件状态，而我不想要使用redux。

fetch.js

  getData() {
   fetch('url')
    .then(response => response.json())
    .then(data => {this.setState({polygons:data})})
    .catch(error => console.log(error));}

openstreetmap.js

 <MapView
        region={this.state.region}
        provider={null}
        style={styles.map} >
         {this.state.polygons.map(polygon => (
           <Polygon
            key={polygon.id}
            coordinates={polygon.coordinates}
            strokeColor={polygon.strokeColor}
            fillColor={polygon.fillColor}
            strokeWidth={2}
          />
         ))}
      </MapView>

Answer 1

umm您可能想在fetch.js中使用异步功能，这将返回承诺。在构造函数中调用此操作，然后进行设置。

在fetch.js

中

export default async function getData(key) {
  try {
    let value = await fetch("url");
    return value.json();
  } catch (e) {
    console.log("caught error", e);
    return {};
    // Handle exceptions
  }
}

OpenStreetMap.js

import getData from "./fetch";
constructor(props) {
   super(props);
   this.state = {};
   getData().then((data) => {
     this.setState({polygons:data});
   });
}

或其他选项是发送回调函数并获取数据，然后进行设置。例如

export default async function getData(callback) {
fetch('url')
  .then(response => response.json())
  .then(data => {callback(data)})
  .catch(error => console.log(error));}

然后在您的OpenStreetMap.js

中

import getData from "./fetch";
constructor(props) {
   super(props);
   this.state = {};
   getData(this.getPolygonData);
}
getPolygonData = (data) => {
  this.setState({polygons:data});
}

以下是工作示例https://snack.expo.io/@subkundu/rude-milkshake