Question

我正在尝试发出API请求并显示它们，我认为我必须将它们渲染为数组，但是存在问题。这是我的代码

      class RecipesList extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        searchResult: ''
      };
    }
    componentDidMount() {
      fetch('https://api.edamam.com/search?q=chicken&app_id=ec279fce&app_key=51017bcd32e69bcb0cc8b5f99e8783ca')
      .then(resp => resp.json())
      .then(resp => this.setState({searchResult: resp})
      );
    }
    render() {
      return <div>{this.state.searchResult}</div>  //???
    }
  }

  class App extends React.Component {
    render() {
      return <RecipesList/>;
    }
  }

  ReactDOM.render(
    <App/>, document.querySelector('#app'));

Answer 1

如果您只想查看数据，请执行以下操作：

componentDidMount() {
  fetch('https://api.edamam.com/search?q=chicken&app_id=ec279fce&app_key=51017bcd32e69bcb0cc8b5f99e8783ca')
  .then(resp => resp.json())
  .then(resp => this.setState({searchResult: JSON.stringify(resp)})
  );
}

您还可以记录您的响应对象，如：

componentDidMount() {
  fetch('https://api.edamam.com/search?q=chicken&app_id=ec279fce&app_key=51017bcd32e69bcb0cc8b5f99e8783ca')
  .then(resp => resp.json())
  .then((resp) => {
    console.log(resp);
    this.setState({searchResult: JSON.stringify(resp)})
  });
}

问题是:(我在日志中看到了这个错误）

未捕获（在承诺中）错误：对象作为React子对象无效（找到：具有键{q，from，to，params，more，count，hits}的对象）。如果你打算渲染一个孩子的集合，而不是使用数组使用React附加组件中的createFragment（object）包装对象。检查[MyComponent]的渲染方法......

所以实际上，第二个回调中的resp是一个无法呈现的对象，因此您可以将其转换为字符串以查看您的API是否正常工作，或者根据需要在对象中循环以正确呈现它！

随时在您的控制台中发布一些新错误，以便我们找到一种渲染数据的好方法，谢谢

从API request {array

1 个答案: