在 React 组件中处理获取的对象

Question

我是 React 新手，正在学习 FCC，我正在努力处理获取的对象。

我正在尝试构建一个基本的 'Random Quote Machine' React 组件，它获取（然后从中呈现值）一个对象。对象（在 componentDidMount 中获取）有一个键（quotes），它是一个对象数组（每个对象都有 quote 和 author 键），我将这个数组分配给本地状态（quotesData），然后作为常量渲染.

本质上，该组件应首先在 render 上显示随机报价，然后在每次单击新报价按钮时再次显示。因此，我将（随机）数组中的一个对象分配给 nextQuote。在此之后，我运行遇到了问题。我可以console.log(quotesData)（和nextQuote）没有问题，但为什么我不能从存储在nextQuote 到 nextQuoteQuote 或 nextQuoteAuthor，使用点（或括号）表示法？

这是一个 link 到笔（其完整代码也在下面）： https://codepen.io/igorgetmeabrain/pen/rNmwMEM

现在，它只是不断向我抛出对象错误，根本不会渲染。请帮忙！

class RandomQuotes extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isFetching: false,
      quotesData: [],
      random: Math.random()
    };
    this.getNewQuote = this.getNewQuote.bind(this);
    this.fetchData = this.fetchData.bind(this);
  }
  
  fetchData() {
    this.setState({isFetching: true});
   fetch ('https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json', 
{headers: {
      Accept: 'application/json'
    }})
      .then(res => res.json())
      .then((data) => 
            {
      this.setState({quotesData: data.quotes, isFetching: false});
      })
    .catch(error => {
                console.log(error);
                this.setState({isFetching: false, error: error});
            });
  }
  
  getNewQuote() {
    this.setState({
      random: Math.random()
    });
  } 

  componentDidMount() {
    this.fetchData();
  }

  render() {
    const {quotesData, isFetching, error} = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (isFetching) {
      return <div>Loading...</div>;
    } else {
      const randomIndex = Math.floor(this.state.random * quotesData.length);
      const nextQuote = quotesData[randomIndex];
      const nextQuoteQuote = nextQuote.quote;
      const nextQuoteAuthor = nextQuote.author;
      return (
      <div id="quote-box">
        <p id="text">{nextQuoteQuote}</p>
        <p id="author">{nextQuoteAuthor}</p>
        <button id="new-quote" onClick={this.getNewQuote}>
          New Quote
        </button>
      </div>
    );
  }
 }
}

ReactDOM.render(<RandomQuotes />, document.getElementById("root"));

Answer 1

最快的解决方法是更改 isFetching: true 状态。发生这种情况是因为在开始时如果 isFetching: false 和 error: false 它会进入您定义

的最后 } else { 部分

const nextQuoteQuote = nextQuote.quote;
const nextQuoteAuthor = nextQuote.author;

这是未定义的，因为数据正在后台获取，但尚未获取。

所以基本上，当您必须在 componentDidMount 方法中获取数据时，您从一开始就将加载状态设置为 true，这样组件就知道它必须等待它获取并稍后显示数据。

在 React 组件中处理获取的对象

Handling fetched objects in React components

javascript

json

reactjs

fetch-api