反应 - 使用外部URL时未定义映射功能

Question

我收到通常的错误.map不是函数。只有当我使用外部api url时，才会发生错误，同时当我在浏览器中打开url并将json数据复制到本地文件并通过ajax调用它时，它工作得很好。我认为在JSON响应中存在错误。我无法弄清楚。

请检查下面的代码。当我通过url1来axios我得到错误，当我通过url2 axios，数据打印就好了。

class Products extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state = { 
     products: [] 
    } 
    } 
    getProducts(){ 
    const url1="https://anagha.herokuapp.com/anagha-all-products/100"; 
    const url2 = "https://quarkbackend.com/getfile/sivadass/anagha-products"; 
    axios.get(url2) 
     .then(response => { 
     this.setState({ 
      products : response.data 
     }, function(){ 
      console.log(this.state.products) 
     }) 
     }) 
    } 
    componentWillMount(){ 
    this.getProducts(); 
    } 
    render(){ 
    var productsList = this.state.products.map(function(data) { 
     return (
     <li>{data.title}</li> 
    ); 
    }); 
    return(
     <ul>{productsList}</ul> 
    ); 
    } 
} 

这里是link到工作演示

Answer 1

接收JSON响应后，我用JSON.parse解析它，然后在错误得到清除。

const url1="https://anagha.herokuapp.com/anagha-all-products/100"; 
axios.get(url1) 
    .then(response => { 
    let parsedData = JSON.parse(response.data); 
    this.setState({ 
     products : parsedData 
    }, function(){ 
     console.log(this.state.products) 
    }) 
    })