Question

我的状态是一个空数组：

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

我需要用执行GET请求时获得的以下数据来填充该状态：

查看图片

See image

已更新：

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后如何更新状态？

Answer 1

这是完整的React组件代码，您将看到如何在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”中，我得到了（指React组件），并在react中使用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或函数生成器，因为它们是更好的方法。搜索它们并学习使用它们。

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

Answer 3

如果您在多个地方使用get调用，则可能有点不习惯，请尝试这种方法。

//立即返回此处不执行任何操作

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
}

Answer 4

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

最初 => { isLoading：否，数据：“，呃： '' }

发起呼叫 => { isLoading：true，数据：“，呃： '' }

通话成功 => { isLoading：否，数据：response.data 呃： '' }

通话失败 => { isLoading：false，数据：“，错误：错误 }

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

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

在反应中，如何在获取后更新状态？

4 个答案: