React中能否将Promise返回值赋值给外部变量？

嘿，作为React新手碰到这个异步数据跨组件共享的问题太正常啦！先直接给你说结论：直接把Promise返回的latLng赋值给外部变量不是靠谱的做法——因为Promise是异步执行的，等你在外部同步代码里想用那个变量时，它大概率还没被赋值；而且跨组件共享数据，React有更规范的单向数据流方式，下面给你一步步讲怎么解决你的问题～

为什么直接赋值外部变量行不通？ #

你当前的代码里，getLatLng(results[0])返回的是Promise，.then(latLng => ...)里的latLng是在异步回调中拿到的。如果你尝试把它赋值给一个外部变量（比如let globalLatLng;然后在then里globalLatLng = latLng），当你在其他地方（比如Map组件里）访问这个变量时，回调可能还没执行，变量还是undefined。而且这种全局变量的方式会让组件状态变得不可控，完全违背React的设计理念。

适合新手的解决方案 #

1. 状态提升（最推荐的基础方案） #

React的核心思想是单向数据流，如果两个组件需要共享数据，最直接的方式是把共享状态提到它们的共同父组件中，然后通过props把数据和更新方法传递给子组件。

假设你的组件结构是这样的：

App.js
├─ SearchBox.js（你的LocationSearchInput）
└─ Map.js

那我们可以这么做：

步骤1：在父组件（App.js）中维护共享状态

import React, { Component } from 'react';
import SearchBox from './SearchBox';
import Map from './Map';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      latLng: null // 用来存储共享的经纬度
    };
  }

  // 定义一个更新latLng的方法，传给SearchBox
  updateLatLng = (newLatLng) => {
    this.setState({ latLng: newLatLng });
  };

  render() {
    return (
      <div>
        {/* 把更新方法传给SearchBox */}
        <SearchBox onLatLngChange={this.updateLatLng} />
        {/* 把latLng作为props传给Map */}
        <Map currentLatLng={this.state.latLng} />
      </div>
    );
  }
}

export default App;

步骤2：修改SearchBox.js中的handleSelect方法

在你的LocationSearchInput组件中，调用父组件传过来的onLatLngChange方法，把拿到的latLng传递上去：

export default class LocationSearchInput extends Component {
  constructor(props) {
    super(props);
    this.state = {address: ''}
  }

  handleChange = (address) => {
    this.setState({ address });
  };

  handleSelect = (address) => {
    geocodeByAddress(address)
      .then(results => getLatLng(results[0]))
      .then(latLng => {
        console.log(latLng);
        // 调用父组件的方法更新共享状态
        this.props.onLatLngChange(latLng);
      })
      .catch(error => console.error('Error', error));
  };

  render() {
    // ... 你的渲染逻辑
  }
}

步骤3：在Map.js中使用传递过来的latLng

import React, { Component } from 'react';

class Map extends Component {
  render() {
    const { currentLatLng } = this.props;
    if (!currentLatLng) {
      return <div>请先选择地址获取经纬度</div>;
    }
    // 这里就可以使用currentLatLng来渲染地图了
    return (
      <div>
        当前经纬度：{currentLatLng.lat}, {currentLatLng.lng}
        {/* 你的地图组件逻辑，比如Google Maps或者百度地图 */}
      </div>
    );
  }
}

export default Map;

2. 使用React Context（适合组件层级较深的场景） #

如果你的组件层级很深，不想一层一层传递props，可以用React Context来实现跨层级的数据共享。

步骤1：创建Context文件（比如LatLngContext.js）

import React from 'react';

// 创建一个Context，默认值可以设为null
const LatLngContext = React.createContext(null);

export default LatLngContext;

步骤2：在父组件中用Provider包裹子组件

修改App.js：

import React, { Component } from 'react';
import SearchBox from './SearchBox';
import Map from './Map';
import LatLngContext from './LatLngContext';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      latLng: null,
      updateLatLng: (newLatLng) => {
        this.setState({ latLng: newLatLng });
      }
    };
  }

  render() {
    return (
      <LatLngContext.Provider value={this.state}>
        <SearchBox />
        <Map />
      </LatLngContext.Provider>
    );
  }
}

export default App;

步骤3：在SearchBox.js中使用Context更新数据

import React, { Component } from 'react';
import LatLngContext from './LatLngContext';

export default class LocationSearchInput extends Component {
  // ... 其他代码不变

  handleSelect = (address) => {
    geocodeByAddress(address)
      .then(results => getLatLng(results[0]))
      .then(latLng => {
        console.log(latLng);
        // 通过Context的updateLatLng方法更新数据
        this.context.updateLatLng(latLng);
      })
      .catch(error => console.error('Error', error));
  };

  // 声明使用的Context
  static contextType = LatLngContext;

  render() {
    // ... 你的渲染逻辑
  }
}

步骤4：在Map.js中使用Context获取数据

import React, { Component } from 'react';
import LatLngContext from './LatLngContext';

class Map extends Component {
  static contextType = LatLngContext;

  render() {
    const { latLng } = this.context;
    if (!latLng) {
      return <div>请先选择地址获取经纬度</div>;
    }
    return (
      <div>
        当前经纬度：{latLng.lat}, {latLng.lng}
        {/* 你的地图组件逻辑 */}
      </div>
    );
  }
}

export default Map;

总结 #

作为React新手，状态提升是你首先要掌握的跨组件共享数据的方法，它符合React的单向数据流理念，逻辑清晰容易维护。等你对React的状态管理有了更深的理解后，再尝试Context或者Redux这类状态管理工具。

内容的提问来源于stack exchange，提问作者user9703772