React中点击按钮将data值切换为data2的实现方法

要实现点击按钮将data切换为data2的功能，你需要借助React的状态管理来动态控制渲染的数据，具体实现如下：

• 引入useState钩子管理当前展示的数据源
• 初始化状态，默认值设为data
• 添加按钮并绑定点击事件，触发时将状态更新为data2
• 渲染列表时使用状态变量替代原有的data

修改后的完整组件代码：

import { useState } from 'react';

export function Home() { 
  // 初始化状态，默认使用data作为数据源
  const [currentData, setCurrentData] = useState(data);

  // 切换到data2的触发函数
  const switchToData2 = () => {
    setCurrentData(data2);
  };

  return (  
      <div className="instagram-container">
          {/* 切换按钮 */}
          <button onClick={switchToData2}>切换为data2数据</button>
          {/* 基于状态变量渲染列表 */}
          {
            currentData.map(item =>{
              return (
                <div key={item.id} className="row"><Posts id={`${item.href}`}/></div>
              )
            })
          }      
      </div>
  )
}

说明：

• useState用于在函数组件中维护状态，currentData存储当前要渲染的数据源，setCurrentData是更新该状态的方法
• 点击按钮时调用switchToData2，通过setCurrentData将数据源替换为data2，React会自动重新渲染组件展示新数据
• 确保data和data2在组件作用域内已定义或可正常访问

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