对象无效作为React子对象（找到：具有键{...}的对象）

Question

我试图获取一些示例数据并在我的本机应用中显示一些文本。这就是代码的外观（几乎直接来自教程）：

function getExampleData() {
  return fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson.movies[0].title;
    })
    .catch((error) => {
      console.log(error);
      return 'Error!';
    });
}

class CenterView extends React.Component {
  render() {
    return (
      <Text>{getExampleData()}</Text>
    );
  }
}

来自网址的响应正文：

{
  "title": "The Basics - Networking",
  "description": "Your app fetched this from a remote endpoint!",
  "movies": [
    { "title": "Star Wars", "releaseYear": "1977"},
    { "title": "Back to the Future", "releaseYear": "1985"},
    { "title": "The Matrix", "releaseYear": "1999"},
    { "title": "Inception", "releaseYear": "2010"},
    { "title": "Interstellar", "releaseYear": "2014"}
  ]
}

我收到错误消息

如果我在函数调用之后放置toString()，则打印出[object Object]，所以我想这是在返回之前将对象转换为文本的问题。谁能告诉我这是怎么做到的？

Answer 1

一个。您正在返回通过fetch中的getExampleData方法调用返回的promise对象，而不是Star Wars正如您所期望的那样。

B中。如果要渲染标题。最好使用componentWillMount方法启动调用，然后在到达成功回调时使用this.setState方法设置状态，该方法将运行render方法。

getExampleData() {
  return fetch('https://facebook.github.io/react-native/movies.json')
   .then((response) => response.json())
    .then((responseJson) => {
     return responseJson.movies[0].title;
   })
   .catch((error) => {
     console.log(error);
     return 'Error!';
   });
}
componentWillMount() {
  getExampleData().then(function (title) {
    this.setState({
      title
    })
  })
}

render() {
  return (
    <Text>{this.state.title}</Text>
  );
}