Api.js

Question

我是React的新手，需要帮助。

我试图在一个单独的文件上创建API函数，以便我可以随时重用它。

我意识到我不能在组件外部使用setState，所以我的方法是拥有返回JSON对象的功能。

Api.js

export function getMemberInfo (loginInfo) 
{
    fetch('http:url/'+loginInfo[0].ID)
    .then(res => res.json())
    .then(json => {return json});
}
export default {getMemberInfo};

Members.js

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

class Members extends Component {
    constructor(props) {
        super(props);
        this.state = {
            // Data from Login
            loginInfo:this.props.location.state,
            // Member Data
            memberInfo:[]
        };
    }
    componentWillMount() {
        console.log(getMemberInfo(this.state.loginInfo);
        this.setState({memberInfo: getMemberInfo(this.state.loginInfo)});
    }
};
export default Members;

通过console.log查看结果时，我不确定。

这是正确的方法吗？

感谢您的帮助。

Answer 1

首先，您要尝试在内部返回一个值（异步），您可以传递回调（不推荐），也可以利用异步/等待的力量

export async function getMemberInfo (loginInfo) 
{
    const res = await fetch('http:url/'+loginInfo[0].ID);
    const json = await res.json();
    return json;
}
export default {getMemberInfo};

在您的组件中执行以下操作：

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

class Members extends Component {
    constructor(props) {
        super(props);
        this.state = {
            // Data from Login
            loginInfo:this.props.location.state,
            // Member Data
            memberInfo:[]
        };
    }
    async componentWillMount() {
        const memberInfo = await getMemberInfo(this.state.loginInfo);
        this.setState({ memberInfo });
    }
};
export default Members;

Answer 2

您可以在api函数中使用async和await解决此问题。问题在于您的提取返回了一个Promise，而您的调用函数根本不返回任何东西。

export function async getMemberInfo (loginInfo) 
{
    return await fetch('http:url/'+loginInfo[0].ID)
    .then(res => res.json())
    .then(json => {return json});
}
export default {getMemberInfo};

如何在React中的函数内返回JSON

Api.js

Members.js

2 个答案: