UncaughtTypeError products.map 不是 function

Question

product.map 不是 function，我已经尝试了 web 的几乎所有修复程序仍然无法正常工作。 另外，我尝试过 console.log(response.data) 并且它响应成功

反应版本 7.0

constructor () {
        super()
        this.state = {
          products: []
        };
      }
  componentDidMount(){
         axios.get('http://localhost:8000/api/v1/products/1')
         .then(response => {
           this.setState({ products: response.data });
         })
         .catch(function (error) {
           console.log(error);
         })
       }
  render(){
   var { products } = this.state;
    var merk = products.map(products =>  {products.merk} );

得到错误产品。map 不是 function 在 var merk=.....

谢谢。

控制台日志：

{success: true, data: Array(1), message: "Phone retrieved Successfully.."}
data: Array(1)
0: {id_product: 1, merk: "Xiaomi ", tipe: "Mi Note 10", soc_nama: "Qualcomm", soc_tipe: "Snapdragon 855+", …}
length: 1
__proto__: Array(0)
message: "Phone retrieved Successfully.."
success: true
__proto__: Object

Answer 1

products.map is not a function ，这意味着products不是数组

在 componentDidMount 的 API 中，您必须访问从服务器返回的数据。 您访问response.data ，这意味着您只是访问 XMLHttpRequest 的数据，而不是您的 API 的数据。

尝试console.log(response.data) ，看看哪个是你想从服务器获取的数组数据