如何在本机反应中从函数返回值

Question

此函数从我正在使用的 API 返回令牌数据。

// api.js
var token="";
    const tokenAl= {
  tokenner: function(){
    fetch("myurl/api/token", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json-patch+json"
      },
      body: JSON.stringify({
        // here is not important
      })
    })
      .then(response => response.json())
      .then(responseJson => {
       token= responseJson.result.token;
        console.warn(token) // it's ok. I got the token.
      })
      .catch(error => console.warn(error));    
       // this.props.navigation.navigate("Customer"); // Customer sayfasına gidiş.
  },
}

export default tokenner;

一切正常。现在，如何在 Login-Form.js 文件中使用这个令牌值？

Answer 1

首先是export default tokenAl.tokenner。

要在另一个文件中使用它，只需将其添加到 Login-Form.js 的顶部

import tokenner from './api.js'; //assuming it's located in the same directory

您需要修改您的 tokenner 函数，以便您可以检索令牌。返回一个承诺。

tokenner: function(){
    return fetch("myurl/api/token", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json-patch+json"
      },
      body: JSON.stringify({
        // here is not important
      })
    })
      .then(response => response.json());
  }

然后在你的 LoginFormComponent 中

import React, { Component } from "react";
import tokenner from "./api";

export default class LoginFormComponent extends Component {
  constructor() {
    super();
    this.state = { token: null };
  }

  componentWillMount() {
    tokenner()
      .then(responseJson => {
        const token = responseJson.result.token;
        console.warn(token); // it's ok. I got the token.
        this.setState({ token });
      })
      .catch(error => console.warn(error));
  }
  render() {
    const { token } = this.state;
    return <div>{token}</div>;
  }
}

Working example here