React随机名言生成器问题：点击无法页面展示名言仅能输出到控制台

嘿，我帮你找出代码里的问题啦！你的逻辑思路是对的，但几个小细节没处理好，导致名言只在控制台输出，页面没渲染出来。咱们一步步来修正：

问题分析 #

1. State 缺少当前展示字段：你现在的state只保存了名言数组，但没有专门存储「当前要显示的那条名言」。每次点击应该把选中的名言单独存在state里，而不是重复设置原数组。
2. 变量逻辑与命名错误：你在changeQuoteHandler里的arrayIndex变量，实际拿到的是名言内容（不是数组索引），而且你之后没有把这个选中的名言存到state里，反而把原数组重新setState回去，等于状态根本没更新。
3. 组件传参错误：你给Quote组件传的quote={this.state.quotes.arrayIndex}是错误写法——quotes是数组，不存在arrayIndex这个属性，所以Quote组件拿到的props.quote是undefined，页面自然没内容。

修正后的代码 #

Card组件修改版

class Card extends Component { 
  state = { 
    quotes: ['"A dream doesn\'t become reality through magic; it takes sweat, determination and hard work."','"You GOT this!"','"To be or not to be that is the question"'],
    currentQuote: '' // 新增：存储当前要展示的名言
  }; 

  // 初始化时自动加载一条名言，不用等用户点击
  componentDidMount() {
    this.changeQuoteHandler();
  }

  changeQuoteHandler = (event) => { 
    const { quotes } = this.state;
    // 随机选中一条名言
    const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
    console.log(randomQuote); 
    // 更新state里的currentQuote，触发组件重新渲染
    this.setState({ currentQuote: randomQuote });
  }; 

  render(){ 
    return ( 
      <div className="Card"> 
        <div> 
          <h2>Random Quote Generator</h2> 
          {/* 把当前选中的名言传给Quote组件 */}
          <Quote className="QuoteStyle" quote={this.state.currentQuote}/> 
        </div> 
        <div className="Flex"> 
          <div> 
            <NewQuoteButton onClick={this.changeQuoteHandler}/> 
          </div> 
        </div> 
      </div> 
    ) 
  } 
}; 
export default Card;

Quote组件（无需修改）

import React from 'react'; 
const Quote = (props) => { 
  return( 
    <p>{props.quote}</p> 
  ) 
}; 
export default Quote

修正说明 #

• 新增currentQuote字段专门存储当前展示的名言，React会在这个字段变化时自动重新渲染组件。
• changeQuoteHandler现在会正确选中随机名言，并更新currentQuote的状态，而不是重复设置原数组。
• 给Quote组件传递this.state.currentQuote，确保组件能拿到正确的名言内容并渲染。
• 新增componentDidMount钩子，页面加载时就自动显示一条名言，提升用户体验。

这样修改后，每次点击按钮，页面就会同步显示控制台里的那条随机名言啦！

内容的提问来源于stack exchange，提问作者Angela Inniss