Question

我有一个带有React组件的 quote.jsx 文件：

import React from 'react';
import fetch from 'node-fetch';
import './quotes.css';

export default class Quotes extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return(
      <div className="quotes">
        {
          fetch('/random_quote')
            .then(res => res.json())
            .then(json => json.text())
        }
      </div>
    );
  }
}

正如您所看到的，它使用 fetch 来获取包含与引用相关的数据的JSON对象（引用文本和作者）并显示一些此数据。

当我使用 webpack 捆绑我的系统时，我收到此警告消息：

警告在./fe/~/encoding/lib/iconv-loader.js中 9：12-34严重依赖：依赖的请求是表达式

当我运行我的网络系统并访问应显示此组件的URL时，我收到以下错误：

未捕获错误：对象作为React子对象无效（找到：[object Promise]）。如果您要渲染子集合，请使用数组，或使用React附加组件中的createFragment（object）包装对象。检查Quotes的呈现方法。

我的后端没有错误，正确生成并返回了JSON。这不是问题。

我对React.js比较陌生，之前从未见过这条消息。

有人可以帮我吗？我整个星期天一直在与这个错误作斗争，没有更多的选择来处理它。

Answer 1

Don't perform the fetch inside render, instead do it in componentDidMount or componentWillMount.

Here is how I would implement it:

import React from 'react';
import fetch from 'node-fetch';
import './quotes.css';

export default class Quotes extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    fetch('/random_quote')
    .then(res => res.json())
    .then(json => {
      this.setState({text: json.text()});
    });
  }

  render() {
    return(
      <div className="quotes">
        {this.state.text}
      </div>
    );
  }
}

将数据提取到React.js组件无效

1 个答案: