反應 - 使用外部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) 
    }) 
    })