如何优化该React随机名言应用代码，使其更简洁符合开发规范？

你当前的代码已经实现了基础功能，但存在几处不符合React开发范式、可维护性不足的问题，可以按以下方向调整：

核心问题修正 #

你目前使用document.getElementById().innerHTML直接修改DOM的写法是React开发中需要尽量避免的：React本身是数据驱动视图的框架，所有界面更新都应该通过修改状态触发，直接操作DOM会绕开React的虚拟DOM调度，很容易出现状态和视图不同步的bug。

具体优化点 #

• 移除所有原生DOM操作，新增单独的状态存储当前展示的名言，状态更新后React会自动完成视图重渲染
• 补全fetch请求的错误捕获逻辑：原生fetch只有在网络故障时才会抛错，HTTP 4xx/5xx类错误需要手动判断res.ok处理，否则接口返回异常时会出现解析错误
• 抽离随机选取名言的公共逻辑，避免重复代码
• 数据加载完成后默认展示一条名言，不需要用户首次点击才看到内容
• 精简冗余状态：原来的isLoaded状态完全可以通过「名言列表是否为空」「是否存在错误」推导，不需要单独维护
• 统一命名规范：事件处理函数统一用handleXXX命名，变量名用小驼峰，语义更清晰
• 修正多余的空Fragment包裹，让JSX结构更简洁
• 给所有边界场景加判断：比如名言列表为空时的取值兜底，避免随机数计算报错

优化后完整代码 #

import { useState, useEffect } from 'react';

function App() {
  const [error, setError] = useState(null);
  const [quotesList, setQuotesList] = useState([]);
  const [currentQuote, setCurrentQuote] = useState('');

  // 抽离随机选名言的工具方法
  const getRandomQuote = (list) => {
    if (!Array.isArray(list) || list.length === 0) return '';
    const randomIndex = Math.floor(Math.random() * list.length);
    return list[randomIndex]?.text || '';
  };

  useEffect(() => {
    const loadQuotes = async () => {
      try {
        const res = await fetch('https://type.fit/api/quotes');
        if (!res.ok) throw new Error(`请求异常，状态码：${res.status}`);
        const quoteData = await res.json();
        setQuotesList(quoteData);
        // 加载完成默认渲染第一条随机名言
        setCurrentQuote(getRandomQuote(quoteData));
      } catch (err) {
        setError(err);
      }
    };

    loadQuotes();
  }, []);

  const handleGenerateClick = () => {
    setCurrentQuote(getRandomQuote(quotesList));
  };

  // 按优先级做条件渲染
  if (error) return <div>Error: {error.message}</div>;
  if (quotesList.length === 0) return <div>Loading...</div>;

  return (
    <div className='container'>
      <h3 id='content'>"{currentQuote}"</h3>
      <button onClick={handleGenerateClick} className='btn'>
        Generate Quotes
      </button>
    </div>
  );
}

export default App;

可选体验优化 #

• 可以把currentQuote改成存储完整的名言对象，后续要展示名言作者时不需要修改现有逻辑
• 随机选名言时可以加判断，过滤掉和当前展示内容完全一致的选项，避免连续点击出现重复内容
• 加载阶段可以给按钮加disabled属性，避免数据未加载完成时用户点击无反馈

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