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

您在 data()->then 回调中调用 this.setState，因此 this 是 then 回调函数的上下文。相反，您应该使用箭头函数（它没有自己的上下文）并使用 call

将组件的 this 传递给 data 函数

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，并且更重要的是，期望从 React 组件传递 this。您的数据服务必须负责从服务器检索数据，但不负责更改组件状态，请参阅 Single responsibility principle。此外，可以从另一个数据服务调用您的数据服务。因此，您的数据服务应该 return 承诺，组件可以使用它来调用 setState。

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

然后

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

Answer 2

您的外部函数没有 this 的正确上下文，因此您需要从组件中使用正确的上下文调用它：

componentWillMount() {
    data.call(this);
}

但是，在 API 调用中，它仍然没有正确的 this 上下文，因此您可以在 data() 函数中设置一个变量来指向它：

export function data() {
  let that = this;
  axios('http://www.url.com')
    .then(function(res) {
      return res.data
    })
    .then(function(data) {
      that.setState({
        list: data
      })
    })
}

Details of the this keyword

然而，通常认为更好的做法是只处理组件本身的状态操作，但这将涉及处理 GET 请求的异步性质，可能通过将回调传递给 data()功能。

编辑：更新了异步代码

//api.js
data(callback){
  axios.get('www.url.com')
    .then(res => callback(res));
}

//component.jsx
componentWillMount(){
  data(res => this.setState({list: res}));
}

Answer 3

您的 api 不应该对您的组件一无所知，您可以使用 callback 轻松做到这一点，就像这样 -

export function data(callback) {
    axios.get('www.example.de')
        .then(res => callback({ data: res.data }))
        .catch(err => callback({ error: err }));
}

通过这样做，您可以轻松地对 api

进行单元测试

因此，在您的 Test 组件中，您只需执行 -

componentWillMount() {
  data(result => {
    const { data, error } = result;
    if (error) {
      // Handle error
      return;
    }

    if (data) {
      this.setState({ list: data });
    }
  });
}

Answer 4

您的请求是一个承诺，因此您可以简单地 return 来自导入函数的请求，并在组件中使用该请求的最终 returned 结果。您只想从组件内部更改组件的状态。

export function getData(endpoint) {
  return axios.get(endpoint);
}

请注意，我已将函数名称更改为更多 "actiony"。

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

class Test extends React.Component {
  constructor(props) {
    super(props);

    // Your state is going to be an array of things, so
    // initialise it with an array to spare confusion
    this.state = { list: [] };
  }

  // I use ComponentDidMount for fetch requests
  // https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/
  componentDidMount() {

    // We've returned a promise from `getData` so we can still use the
    // promise API to extract the JSON, and store the parsed object as the
    // component state
    getData('www.example.de')
      .then(res => res.data)
      .then(list => this.setState({ list }))
  }
}

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

React - How to pass returned data from an exported function to a component?

javascript

setstate

reactjs