1

我有一个空数组的状态：

constructor(props) {
    super(props);
    this.state = {
        test_steps: [],
    };
}

我需要使用以下数据填充该状态，这些数据在我发出 GET请求时获得：

看图片

看图片

更新：

export function copyTestScenarioLog(tSL) {
    console.log("\nCalled copyTestScenarioLog");
    let url = config.base_url + `/test_scenario_logs`;
    return fetch(url, {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'Authorization': 'Bearer ' + getUserToken() },
        body: JSON.stringify({
            _id: tSL._id['$oid']
        })
    })
    .then(res => res.json())
    .then(data => { 
        getTestStepLogs(data)
        return data;
    })
    .catch(err => console.log(err));
}

export function getTestStepLogs(data) {
    const id = data.test_step_logs[0].$oid;
    let url = config.base_url + `/test_step_logs/${id}`;
    return fetch(url, {
        method: 'GET',
        headers: { 'Authorization': 'Bearer ' + getUserToken() }
    })
    .then(res => res.json())
    .then(data => {
        console.log(data)
        return data 
    })
    .catch(err => console.log(err));
}

执行 GET 获取后如何更新我的状态？

4

4 回答 4

2

这是完整的反应组件代码，您会看到我如何在 componentDidMount 中调用您的函数，在这里我将“this”作为参数传递给 copyTestScenarioLog。

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

class Component1 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            test_steps: []
        };
    }

    componentDidMount() {
        var reactComponent = this;
        copyTestScenarioLog('i dont konw that is tsl', reactComponent);
    }

    render() {
        return (
            <div></div>
        );
    }
}

export default Component1;

在“copyTestScenarioLog”中，我得到了（指反应组件），并在反应中使用 setState 函数。

export function copyTestScenarioLog(tSL, reactComponent) {
    console.log("\nCalled copyTestScenarioLog");
    let url = config.base_url + `/test_scenario_logs`;
    return fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + getUserToken() },
        body: JSON.stringify({
            _id: tSL._id['$oid']
        })
    })
        .then(res => res.json())
        .then(data => {
            getTestStepLogs(data)
            reactComponent.setState({
                test_steps: data
            });
            return data;
        })
        .catch(err => console.log(err));
}

但基本上我不使用这种方法，我只是想展示它是如何完成的，我通常使用 await/async 或函数生成器，因为它们是更好的方法。搜索它们并学习使用它们。

于 2018-08-20T04:40:48.223 回答
2

您可以将onSuccess函数传递到您的getTestStepLogs并更新您的状态。

export function getTestStepLogs(data , onSuccess) {
    const id = data.test_step_logs[0].$oid;
    let url = config.base_url + `/test_step_logs/${id}`;
    return fetch(url, {
        method: 'GET',
        headers: { 'Authorization': 'Bearer ' + getUserToken() }
     }).then(resp => {
     if (onSuccess)
        onSuccess(resp);

}).catch(err => console.log(err));
}

当您调用 getStepLogs 时，将 onSuccess 作为道具传递：

this.props.getTestStepLogs(data , (resp)=>{
 this.setState({test_steps:resp});
})
于 2018-08-20T04:44:36.503 回答
0

如果您在多个地方使用 get 调用，则可以稍微通用并尝试这种方法。

//return here 现在什么都不做

export function getTestStepLogs(data) {
    return new Promise(function(resolve, reject){
    const id = data.test_step_logs[0].$oid;
    let url = config.base_url + `/test_step_logs/${id}`;
    return fetch(url, {
        method: 'GET',
        headers: { 'Authorization': 'Bearer ' + getUserToken() }
    })
    .then(res => res.json())
    .then(data => {
        console.log(data)
        resolve(data);
    })
    .catch(err => {console.log(err);
            reject(err);
        });
  })

}

async componentDidMount() {
    let data = await copyTestScenarioLog();

  //now set it to state
}
于 2018-08-20T04:48:48.347 回答
0

对于异步调用，有三种状态。呼叫发起、呼叫成功和呼叫失败。说“isLoading”表示正在后台运行的呼叫的状态。

最初=> { isLoading : false, data : '', err : '' }

呼叫发起=> { isLoading : true, data : '', err: '' }

调用成功=> { isLoading : false, data : response.data err: '' }

调用失败=> { isLoading :false, data : '', err: err }

通常，组件的 GET 调用是在 componentDidMount 中进行的。根据反应文档，这也是建议的方式。

componentDidMount(){
  //Call Initiation
  this.setState({
    isLoading : true,
    data : '',
    err: ''
  });
  makeApiCall(api).
  then((response) => {
    this.setState({
      isLoading : false,
      data : response.data
      err: ''
    });
  }, 
  (err) => {
    this.setState({
      isLoading :false,
      data : '',
      err: err
    })
  })
  .catch((err) => {
    this.setState({
      isLoading :false,
      data : '',
      err: err
    })
  })
}
于 2018-08-20T05:09:10.680 回答