Javascript reactJS映射函数未按预期工作

我有一个reactJS应用程序，在这里我试图动态呈现一些我用fetch（）承诺读入的数据。这是我的申请代码：

    import React from 'react'; 
import '../styles/app.css'; 

//think of react components as functions 
class Testpage2 extends React.Component { 

constructor(props) { 
    super(props); 
    this.state = { 
        numberOfRecords: 0,
        productArray: [{
            barcode: '',
            name: ''
        }]
    }; 

}  

componentDidMount() { 

    let currentComponent = this; 
    var recordCount = 0;
    var tempData = [];

    //Make use of the API not the web service. 
    let url = "http://wmjwwebapi-dev.us-west-2.elasticbeanstalk.com/api/getdata"; 
    const options = { method: 'GET' }; 

    fetch(url, options) 
    .then(function(response) { 
        return response.json(); 
    }) 
    .then(function(myJson) { 
        if (myJson == undefined) 
        { 
        console.log("fetch failed"); 
        } 
    else 
    { 
        //inspect the data that the WebAPI returned 
        var return_code = myJson[0].return_code; 
        if (return_code == "Default Return code"){ 
            recordCount = -2; 
        } else { 
            tempData = JSON.parse(myJson[0].return_string);
            recordCount = tempData.barcode.length; 
        }
        currentComponent.setState(
        {
            numberOfRecords: recordCount,
            productArray: currentComponent.state.productArray.push(
            { 
                name: tempData.name, 
                barcode: tempData.barcode 
            })
        }
    );
    } 
    }); 
} 

render() { 
    console.log(this.state.productArray);
    return ( 
        <div> 
            { this.state.productArray.map((prod, index) => <li key={index}>{prod.barcode}</li>)}
        </div> 
    ) 
} 
} 

export default Testpage2

这是我在render（）函数中添加的console.log（）的结果：

我不确定这个错误告诉了我什么，也不确定如何调试这个问题

非常感谢您的帮助。

---

谢谢。

array.push的返回类型是数组的新长度，也就是一个数字

因此，您将状态属性productArray设置为一个数字，然后尝试调用未定义的number.map

如何修复

先按，然后使用该数组设置状态

const updatedArray = [...currentComponent.state.productArray] 
updatedArray.push({ name: tempData.name, barcode: tempData.barcode })

currentComponent.setState({
   numberOfRecords: recordCount,
   productArray: updatedArray
}

资源：

根据：

push（）方法将一个或多个元素添加到数组的末尾，并返回数组的新长度

代码似乎希望

Array.push（）

将返回修改后的数组本身：

productArray: currentComponent.state.productArray.push(...

为了防止状态损坏，在调用

setState（）

array的push（）

函数之前，应该单独构造新数组，因此不能对其调用

map（）

函数。尝试将功能更改为：

currentComponent.setState({
  numberOfRecords: recordCount,
  productArray: [...currentComponent.state.productArray, { 
    name: tempData.name, 
    barcode: tempData.barcode 
  }]
})

---

JavaScript

Array.push

方法不返回修改后的数组，而是返回数组的新长度，即一个数字。JavaScript中的数字没有

map

方法

您需要首先创建

productArray

的克隆，然后推送新数据，最后设置状态：

const newProductArray = [...currentComponent.state.productArray]
newProductArray.push({ 
    name: tempData.name, 
    barcode: tempData.barcode 
})
currentComponent.setState(
    {
        numberOfRecords: recordCount,
        productArray: newProductArray
    }
)

---

请参见

在渲染函数中使用console.log“this.state.productArray”时，您能告诉我结果是什么吗？我编辑了这篇文章以包含来自console.log（）的图像，谢谢，但我已经回答了您的问题。。。你能确认它能正常工作吗？非常好！非常感谢。能否检查

Array.isArray（this.state.productArray）

是否为

true

？手动修改状态不是一个好主意。推荐的方法是始终使用

setState

方法。一个好朋友。将元素推送到React中数组的更好方法是currentComponent.setState（prevState=>（{productArray:[…prevState.productArray，{name:tempData.name，barcode:tempData.barcode}]）；在React中将元素推送到数组的更好方法是currentComponent.setState（prevState=>（{productArray:[…prevState.productArray:{name:tempData.name，barcode:tempData.barcode}]}）；你有那种语法的来源吗？三思而后行？我从未见过数组中使用

：

，据我所知，它是为对象保留的。很抱歉，这是打字错误，应该是逗号而不是冒号

const newProductArray = [...currentComponent.state.productArray]
newProductArray.push({ 
    name: tempData.name, 
    barcode: tempData.barcode 
})
currentComponent.setState(
    {
        numberOfRecords: recordCount,
        productArray: newProductArray
    }
)