React中点击按钮刷新inspirational-quotes模块数据问题排查

你的问题很明确——你只在组件启动时获取了一次名言，点击按钮时根本没去请求新的名言，只是在切换一个没用的isAppon状态，所以页面上的名言不会更新。

关键修改点： #

• 每次点击按钮时，调用Quote.getQuote()获取新的名言对象
• 更新state里的quoteText和quoteAuthor来刷新页面内容
• 删掉没用的isAppon状态，简化代码

修改后的完整类组件代码： #

import React from "react";
import './App.css';

const a = 'New Quote';
const Quote = require('inspirational-quotes');


class App extends React.Component {
  constructor(props) {
    super(props);
    // 初始化时获取第一条名言
    const initialQuote = Quote.getQuote();
    this.state = {
      quoteText: initialQuote.text,
      quoteAuthor: initialQuote.author
    };
    this.newQuote = this.newQuote.bind(this);
  }

  newQuote() {
    // 点击时获取新名言并更新状态
    const newQuote = Quote.getQuote();
    this.setState({
      quoteText: newQuote.text,
      quoteAuthor: newQuote.author
    });
  }

  render() {
    return (
      <div className="App" >
        <header>
          <button onClick={this.newQuote}>{a}</button>
          <div> A new quote: {this.state.quoteText} from {this.state.quoteAuthor}</div>
        </header>
      </div>
    );
  }
}

export default App;

额外推荐：函数组件写法（React当前更推荐的方式） #

你之前导入了useState但没用到，换成函数组件会更简洁：

import React, { useState } from "react";
import './App.css';

const a = 'New Quote';
const Quote = require('inspirational-quotes');

function App() {
  // 用useState管理名言状态
  const [quote, setQuote] = useState(Quote.getQuote());

  const newQuote = () => {
    setQuote(Quote.getQuote());
  };

  return (
    <div className="App" >
      <header>
        <button onClick={newQuote}>{a}</button>
        <div> A new quote: {quote.text} from {quote.author}</div>
      </header>
    </div>
  );
}

export default App;

这样点击按钮就能正常加载新名言了。

内容的提问来源于stack exchange，提问作者Roberto Leoni