UncaughtTypeError products.map не является функцией

Question

product.map - это не функция, я попробовал почти все исправления из Интернета, которые до сих пор не работают. Кроме того, я попытался 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} );

получил ошибку products.map не функция в var merk =.....

спасибо.

console.log:

{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 не является массивом

В вашем API на componentDidMount, вы должны получить доступ к данным, которые вы возвращаете с сервера. Вы получаете доступ к response.data, это означает, что вы просто получаете доступ к данным XMLHttpRequest, а не к данным вашего API.

Попробуйте console.log(response.data), и посмотрите, какой из данных массива вы хотите получитьсервер