React-如何将返回的数据从导出的函数传递到组件？

Question

如何将我从get请求中接收到的数据传递给组件？我尝试过的任何方法都行不通，但是我的想法是如下代码所示。

    export function data() {
        axios.get('www.example.de')
            .then(function(res) {
                return res.data
            })
            .then(function(data) {
                this.setState({
                    list: data
                })
            })
    }

    import {data} from './api.js';

    class Test extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                list: ""
            };
        }

        componentWillMount() {
            data();
        }
        render() {
            return <p > this.state.list < /p>
        }
    }

Answer 1

您this.setState在data（）-> then回调内部调用，回调函数的this上下文也是如此then。相反，您应该使用箭头函数（它没有自己的上下文），并使用来将组件传递this给data函数call

export function data() {
    axios.get('www.example.de')
        .then(res => res.data)
        .then(data => {
            this.setState({
                list: data
            })
        })
}

import {data} from './api.js';

class Test extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: ""
        };
    }

    componentWillMount() {
        data.call(this);
    }
    render() {
        return <p > this.state.list < /p>
    }
}

但是，您的数据服务一定不知道，setState并且，如果期望更多，则期望this从react组件传递过来。您的数据服务必须负责从服务器撤回数据，而不负责更改组件状态，请参阅“ 单一职责原则”。同样，您的数据服务可以从另一个数据服务中调用。因此，您的数据服务应该返回Promise，组件可以将其用于调用setState。

   export function data() {
       return axios.get('www.example.de')
           .then(res => res.data)
   }

然后

componentWillMount() {
    data().then(data=>{
        this.setState({
            list: data
        })
    });
}