使用useEffect调用API拉取数据，点击重取功能不生效如何解决

错误点汇总 #

• 导入错误：React 本身不导出 Button 组件，Button 为 React Native 专属组件，Web 场景直接使用原生 <button> 标签即可
• 属性误用：span 标签上的 data/keyExtractor/renderItem 为 React Native FlatList 组件专属属性，原生 React JSX 不支持该类属性，直接编写数据渲染逻辑即可
• 关键字冲突：React 中指定元素类名需使用 className，不可使用 class，class 为 JavaScript 保留关键字
• 拼写错误：字段名 defintion 拼写错误，正确写法为 definition
• 事件名错误：Web 端按钮点击事件为 onClick，而非 React Native 专属的 onPress
• 数据结构不匹配：调用的接口返回单个单词对象，并非数组，data 状态初始化类型不符合接口返回结构
• JSX 语法错误：同层级返回多个 JSX 节点需要用 Fragment 或父标签包裹

可运行修正代码 #

import React, { useEffect, useState } from "react";

function RandomWord() {
  const [isLoading, setLoading] = useState(true);
  // 接口返回单个对象，初始化为null更符合数据结构
  const [data, setData] = useState(null);
  // 用计数器触发刷新比布尔值更稳妥，可避免重复状态无法触发更新的问题
  const [fetchCount, setFetchCount] = useState(0);

  useEffect(() => {
    // 每次发起请求前重置加载状态
    setLoading(true);
    fetch("https://rnd-word.vercel.app/word")
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, [fetchCount]);

  return (
    <>
      <div className="App">
        {isLoading ? (
          <p>Loading...</p>
        ) : (
          <div>
            <p>{data.word}</p>
            <p>{data.definition}</p>
          </div>
        )}
      </div>
      <button
        onClick={() => setFetchCount(prev => prev + 1)}
        style={{backgroundColor: "#e56b6f", color: "#fff", border: "none", padding: "8px 16px", borderRadius: "4px", cursor: "pointer"}}
      >
        New Word
      </button>
    </>
  );
}

export default RandomWord;

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