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 。 您的數據服務必須負責從服務器檢索數據，但不負責更改組件狀態，請參閱 單一職責原則。 此外，可以從另一個數據服務調用您的數據服務。 因此，您的數據服務應該返回 promise，組件可以使用它來調用setState 。

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

接着

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

Answer 2

您的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 3

您的請求是一個承諾，因此您可以簡單地從導入的函數中返回它，並在組件中使用最終返回的結果。 您只想從組件內部更改組件的狀態。

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 }))
  }
}

Answer 4

您的外部函數沒有this的正確上下文，因此您需要使用組件內的正確上下文調用它：

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

但是，在 API 調用中，它仍然沒有正確的this上下文，因此您可以在 data() 函數中設置一個變量來指向 this：

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

this 關鍵字的詳細信息

然而，通常認為更好的做法是只處理組件本身的狀態操作，但這將涉及處理 GET 請求的異步性質，可能通過將回調傳遞給data()函數。

編輯：更新為異步代碼

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

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