使用React从提取和渲染页面映射到承诺？

Question

我使用fetch返回正在工作的承诺，但我无法映射这些数据。我的控制台日志返回未定义。

const dataPromise = fetch('http://api.tvmaze.com/schedule?country=GB'); 

let newArray; 

dataPromise 
    .then(data => data.json()) 
    .then(data => { 
    //console.log(data) // This works 
    newArray = data.map((item)=>{ 
     return item.name; 
    }); 
    }) 
    .catch((err)=> { 
    console.error(err); 
    }); 

    console.log(newArray); // This doenst work 

我需要创建一个变量与映射的数据，所以我可以渲染它（与React）。

Answer 1

假设你是为了填充阵营组件获取这个数据，我建议你在componentDidMount执行这个请求，然后setState之后。请记住，fetch是异步的，因此您无法立即获得结果。

componentDidMount() { 
    fetch('http://api.tvmaze.com/schedule?country=GB') 
    .then(response => response.json()) 
    .then(response => this.setState({ data: response })) 
    .catch(err => console.log(err)) 
} 

Answer 2

我相信你需要setState。我不知道这是不是最好的做法或没有，但以下几项工作：

const dataPromise = fetch('http://api.tvmaze.com/schedule?country=GB'); 

dataPromise 
    .then(data => data.json()) 
    .then(data => { 
    //console.log(data) // This works 
    const newArray = data.map((item)=>{ 
     return item.name; 
    }); 
    this.setState({property: newArray}); 
    }) 
    .catch((err)=> { 
    console.error(err); 
    });