从组件外部更改状态

时间:2019-09-14 11:27:51

标签: javascript reactjs react-native expo

我正在将expo native与expo配合使用,并尝试在应用程序运行时(活动或在后台)获取当前位置更新。但是我无法从外部更改组件的状态。

我尝试使用静态函数将任务管理器方法中的位置传递给组件,但是它不起作用。

export default class App extends React.Component {

  state = {
    location: null,
    errorMessage: null,
  };

  componentDidMount = async () => {
    await Location.startLocationUpdatesAsync(LOCATION_TASK_NAME, {
      accuracy: Location.Accuracy.Balanced,
      enableHighAccuracy:true,
      timeInterval: 300,
      distanceInterval: 1
    });
  }

  static updateLocation = location => {
    this.setState({ location });
    console.log(this.location);
  }

  render() {
    return (
      ...
    );
  }
}

TaskManager.defineTask(LOCATION_TASK_NAME, ({ data, error }) => {
  if (error) {
    // Error occurred - check `error.message` for more details.
    return;
  }
  if (data) {
    const { locations } = data;
    // do something with the locations captured in the background
    App.updateLocation(locations[0]);
  }
});

我想根据位置更新来更改状态。出现的错误是TaskManager: Task "background-location-task" failed:, [TypeError: _class.setState is not a function. (In '_class.setState({ location: location })', '_class.setState' is undefined)]

1 个答案:

答案 0 :(得分:2)

在这种情况下,您尝试调用该类的函数,而不是该类的呈现实例。 React根本无法通过这种方式工作。

状态可以从子组件传递到父组件,但只能通过将状态更新功能作为道具传递给子组件。

状态可以通过多种方式从外部进行管理,通常可以使用redux或共享上下文来完成,这可能正是您所需要的。