javascript ReactJs应用程序崩溃，错误为“考虑将错误边界添加到树中”

mgdq6dx1 于 2023-06-20 发布在 Java

关注(0)|答案(3)|浏览(83)

我正在尝试使用React构建一个随机引用API应用程序。当第一次应用程序加载按钮点击它生成的随机报价，但在第二次点击应用程序崩溃
应用程序组件出错
考虑向树中添加错误边界以自定义错误处理行为。

class App extends React.Component {
  state = {
    quotes: null
  };
  componentDidMount() {
  fetch("https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json")
      .then(res => res.json())
      .then(data => {
        // console.log(data);
        this.setState({
          quotes: data.quotes
        });
      });
    // console.log(this.state.quotes);
  }
  randomQuoteHandler = () => {
    const randNumb = Math.floor(Math.random() * this.state.quotes.length);
    const randomQuote = this.state.quotes[randNumb];
    this.setState({
      quotes: randomQuote
    });
    console.log(this.state.quotes);
  };
  render() {
    return (
      <div>
        <button onClick={this.randomQuoteHandler}>gen</button>
        <p>{this.state.quotes !== null && this.state.quotes.quote}</p>
        <p> {this.state.quotes !== null && this.state.quotes.author}</p>
      </div>
    );
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

JavaScript

来源：https://stackoverflow.com/questions/55810240/reactjs-app-crashes-with-error-consider-adding-error-boundaries-to-your-tree

3条答案

按热度按时间

vq8itlhq1#

randomQuoteHandler将this.state.quotes数组替换为所选的quote对象。因此，在第二次单击时，this.state.quotes.length未定义。
您需要将选择的引号存储在另一个状态变量中，如randomQuote。

class App extends React.Component {
  state = {
    quotes: null,
    randomQuote: null,
  }
  componentDidMount() {
    fetch(
      'https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json',
    )
      .then(res => res.json())
      .then(data => {
        // console.log(data);
        this.setState({
          quotes: data.quotes,
        })
      })
    // console.log(this.state.quotes);
  }
  randomQuoteHandler = () => {
    const randNumb = Math.floor(Math.random() * this.state.quotes.length)
    const randomQuote = this.state.quotes[randNumb]
    this.setState({
      randomQuote: randomQuote,
    })
    console.log(this.state.quotes)
  }
  render() {
    return (
      <div>
        <button onClick={this.randomQuoteHandler}>gen</button>
        <p>{this.state.randomQuote !== null && this.state.randomQuote.quote}</p>
        <p>{this.state.randomQuote !== null && this.state.randomQuote.author}</p>
      </div>
    )
  }
}

赞(0）回复(0）举报 2023-06-20

vhmi4jdf2#

问题是，在randomQuoteHandler中，您将整个quotes数组替换为随机的randomQuote对象。randomQuoteHandler函数末尾的log显示了这一点。

this.setState({
  quotes: randomQuote  // Array get replaced by one object
});

因此第二次在状态中没有阵列要读取this.state.quotes.quote

赞(0）回复(0）举报 2023-06-20

dhxwm5r43#

我在自己的应用程序中也犯了同样的错误。基本上，这个错误的发生是因为我的应用程序试图读取一个格式错误的对象。
在我的例子中，我在存储到localStorage之前意外地使用了JSON.stringify()两次，因此当我的应用程序从localStorage读取此数据时，它的格式出乎意料。
一般来说，如果在应用程序中出现此错误，请确保以预期的格式存储对象，以便可以正确读取它们。

赞(0）回复(0）举报 2023-06-20

我来回答

javascript ReactJs应用程序崩溃，错误为“考虑将错误边界添加到树中”

3条答案

相关问题

热门标签

最新问答