React点击Navbar按钮调用JSONPlaceholder API显示标题报错求助

问题根源 #

你在Navbar组件的按钮onClick中直接传入了GetData组件函数，点击按钮时会直接执行这个组件。但GetData内部使用了useState和useEffect这些React Hooks，Hooks只能在函数组件的顶层作用域调用，不能在事件处理函数这类非组件顶层的环境中执行，这就违反了Hooks的规则，导致了错误。

另外，你的fetch请求只获取了单条文章数据（/posts/1），返回的是一个对象，而你用posts.map去遍历对象会报错，应该请求所有文章接口/posts来获取数组数据。

修复方案 #

我们需要把数据状态管理和获取逻辑移到Navbar组件（或父组件），让GetData专注于渲染列表，点击按钮时触发数据获取函数，更新状态后传递给GetData展示。

1. 重构GetData组件 #

修改GetData，让它接收posts作为props，只负责渲染列表：

// GetData.jsx
export function GetData({ posts }) {
  return (
    <div>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

2. 修改Navbar组件 #

在Navbar中管理posts状态，编写获取数据的函数，点击按钮时调用该函数，同时控制GetData的显示：

// Navbar.jsx
import { useState } from 'react';
import styles from './NavbarStyle.module.css';
import { GetData } from './GetData';

export const Navbar = () => {
  const [posts, setPosts] = useState([]);
  const [showData, setShowData] = useState(false); // 控制是否展示数据

  // 定义获取数据的函数
  const fetchPosts = () => {
    fetch('https://jsonplaceholder.typicode.com/posts') // 请求所有文章
      .then(response => response.json())
      .then(json => {
        setPosts(json);
        setShowData(true); // 获取数据后显示列表
      })
      .catch(error => console.error('获取数据失败:', error));
  };

  return (
    <div className={styles.container}>
      <div className={styles.navbar}>
        <div className={styles.navbar__left}>
          <p className={styles.Logo}>API PROJECT</p>
        </div>
        <div className={styles.navbar__right}>
          <button className={styles.Btn} onClick={fetchPosts}>Get Data</button>
        </div>
      </div>
      {/* 当showData为true时渲染GetData组件 */}
      {showData && <GetData posts={posts} />}
    </div>
  );
};

关键说明 #

• 把获取数据的逻辑抽成独立的fetchPosts函数，作为按钮的onClick回调，这样不会触发Hooks调用错误。
• 将posts状态放在Navbar中，通过props传递给GetData组件，符合React的状态提升原则。
• 添加showData状态控制列表的显示，确保只有点击按钮获取数据后才展示列表。
• 修改fetch接口为/posts，获取文章数组，避免map遍历对象报错。

内容的提问来源于stack exchange，提问作者Syed Talal Jilani