如何将API获取的数据渲染到React Tabs组件中？

核心思路 #

将App组件中获取的API数据通过props传递给Tabs组件，在Tabs内部根据当前激活的标签页对数据分组，再用map方法遍历渲染每条quote内容。

步骤1：修改App.js，传递数据给Tabs组件 #

移除App中单独渲染的quote列表，将quotes状态作为props传给Tabs：

import Tabs from './Components/Tabs'
import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  const URL = 'https://strangerthings-quotes.vercel.app/api/quotes/5';
  const [quotes, setQuotes] = useState([])

  function getQuotes () {
    fetch(URL)
      .then(response => response.json())
      .then(data => setQuotes(data))
  }
  useEffect(getQuotes, []);

  return(
    <main className="App">
      <h1 className='heading'>Stranger Things Quotes</h1>
      {/* 将quotes数据传递给Tabs组件 */}
      <Tabs quotes={quotes} />
    </main>
  );
}

export default App;

步骤2：修改Tabs.js，接收并渲染数据 #

1. 接收quotes props，按标签页索引对数据分组
2. 在每个标签页内容区用map遍历对应分组的quote数据
3. 新增加载状态处理，避免数据未加载时出错

import { useState } from 'react';
import './Tabs.css'

function Tabs ({ quotes }) {
  const [toggleState, setToggleState] = useState(1)

  const toggleTab = (index) => {
    setToggleState(index);
  }

  // 按标签页分组数据，可按需调整分组规则
  const groupedQuotes = {
    1: quotes.slice(0,1),
    2: quotes.slice(1,2),
    3: quotes.slice(2,3),
    4: quotes.slice(3)
  }

  // 数据未加载时显示提示
  if (quotes.length === 0) {
    return <div className="container">加载中...</div>
  }

  return(
    <div className="container">
      <div className='nav-tabs'>
        <button className={toggleState === 1 ? "tabs active-tabs" : "tabs"}
          onClick={() => toggleTab(1)}>Tab 1</button>
        <button className={toggleState === 2 ? "tabs active-tabs" : "tabs"}
          onClick={() => toggleTab(2)}>Tab 2</button>
        <button className={toggleState === 3 ? "tabs active-tabs" : "tabs"}
          onClick={() => toggleTab(3)}>Tab 3</button>
        <button className={toggleState === 4 ? "tabs active-tabs" : "tabs"}
          onClick={() => toggleTab(4)}>Tab 4</button>
      </div>

      <div className="content-tabs">
        <div className={toggleState === 1 ? "content active-content" : "content"} >
          <h2>Quotes set 1:</h2>
          <ul>
            {/* map遍历当前tab对应的quote数据 */}
            {groupedQuotes[1].map((quote, index) => (
              <li key={index}>"{quote.quote}" — {quote.author}</li>
            ))}
          </ul>
        </div>

        <div className={toggleState === 2 ? "content active-content" : "content"}>
          <h2>Quotes set 2:</h2>
          <ul>
            {groupedQuotes[2].map((quote, index) => (
              <li key={index}>"{quote.quote}" — {quote.author}</li>
            ))}
          </ul>
        </div>

        <div className={toggleState === 3 ? "content active-content" : "content"}>
          <h2>Quotes set 3:</h2>
          <ul>
            {groupedQuotes[3].map((quote, index) => (
              <li key={index}>"{quote.quote}" — {quote.author}</li>
            ))}
          </ul>
        </div>

        <div className={toggleState === 4 ? "content active-content" : "content"} >
          <h2>Quotes set 4:</h2>
          <ul>
            {groupedQuotes[4].map((quote, index) => (
              <li key={index}>"{quote.quote}" — {quote.author}</li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}
export default Tabs;

关键说明 #

• Props传递：父组件App将quotes状态传给子组件Tabs，实现跨组件数据共享
• 数据分组：通过slice方法将API返回的5条quote分配到4个标签页，可根据需求调整分组数量或规则
• map渲染：在每个标签页内容区用map遍历对应分组的quote数组，生成列表项，注意给每个项添加唯一key属性
• 加载状态：当quotes为空数组时显示加载提示，优化用户体验

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