Question

我是fetch和react.js的新手，基本上是javascript，我试图在表中创建一个新行，然后只返回一个ID（第二个），问题是当时域中的temp正在改变但是虽然我把它定义为功能级变量

，但它并没有改变它

handleAddRow({ newRowIndex }) {
        var temp = null;

        /////////////////////////////////////// updating records in db
        fetch(`${config.serverUrl}/criteriaAPI`,
        {
            method: "POST",
            dataType: 'json',
            headers: {
                    'Accept': 'application/json; charset=UTF-8',
                    'Content-Type': 'application/json; charset=UTF-8'
                }
        })
        .then(function(res){ return res.json(); })
        .then(function(data){  temp = data._id ;alert(temp)})
        //////////////////////////////////////
        console.log(temp);
        const newRow = {
            _id: temp,
            criteria_id: '',
            securityCriteria: '',
            description: '',
        };
       let rows = this.state.rows.slice();
        rows = update(rows, {$push: [newRow]});
    },



console.log(temp) = > null
alert(temp) = > id key : id value

Answer 1

看起来问题是你在没有等待先前的promises完成的情况下调用console.log(temp)，也就是说执行还没有达到你为temp变量赋值的程度。因此，temp变量的值确实会发生变化 - 但它会在console.log(temp)执行后的某个时间发生。

如果要使用临时变量并以异步方式填充 - 必须在相应的then处理程序中访问它。

Answer 2

通过将获取请求分成单个函数来解决问题，如上所述，获取请求花费了太多时间，因此我有另一个函数handleAddRow()使用promises等待它

addRow(){
        return fetch(`${config.serverUrl}/criteriaAPI`,
        {
            method: "POST",
            dataType: 'json',
            headers: {
                    'Accept': 'application/json; charset=UTF-8',
                    'Content-Type': 'application/json; charset=UTF-8',
                }
        }) 
            .then(response => {
                 return response.json()
            })
            .catch(err => {
                console.log("fetch error" + err);
            });

    },


     handleAddRow({ newRowIndex }) {
        this.addRow()
            .then(data => {  
                let row =  this.createSingleRow(data);
                console.log(row);
                let rows = this.state.rows.slice();
                rows = update(rows, {$push: row});
                console.log(rows);
                this.setState({ rows });
            });
    },

    createSingleRow(data) {
        console.log('Entered into createRows');
        let temp = [];
        temp.push({
                _id: data._id,
                criteria_id: data.criteria_id,
                securityCriteria: data.securityCriteria,
                description: data.description
            });

        //console.log(temp);
        return temp;
    },

在获取请求中更新功能级别变量

2 个答案: