React如何实现双按钮调用不同API更新同一DIV内容？

问题排查 #

你的代码存在两处关键问题：

1. getPing2函数里错误调用了setPing(res.data)，应该更新ping2的状态，也就是setPing2(res.data)；
2. 页面始终只渲染ping的内容，没有根据点击动作切换展示目标。

推荐优化方案 #

不需要维护两个独立状态，用一个统一的状态存储当前要展示的API响应，逻辑更简洁易维护：

import { useState } from 'react';
import axios from 'axios';
import Button from '@mui/material/Button';

function CoingeckoApiPage2() {
    // 单个状态存储当前要显示的响应内容
    const [currentResponse, setCurrentResponse] = useState('');

    // 封装通用API调用函数，接收接口地址作为参数
    const fetchApi = async (apiUrl) => {
        try {
            const res = await axios.get(apiUrl);
            console.log(res.data);
            setCurrentResponse(res.data);
        } catch (err) {
            console.error('API请求失败:', err);
            setCurrentResponse('请求失败，请稍后重试');
        }
    };

    return (
        <div>
            <Button 
                onClick={() => fetchApi(CoinGeckoPing())} 
                variant="contained" 
                color="bluecustom"
            >
                GET1
            </Button>         
            <Button 
                onClick={() => fetchApi(CoinGeckoCurrencies())} 
                variant="contained" 
                color="bluecustom"
            >
                GET2
            </Button>
                                         
            <div>{JSON.stringify(currentResponse)}</div>                               
        </div>
    );
}

export default CoingeckoApiPage2;

保留原结构的修复方案（仅适配初始写法） #

如果想保留两个独立状态，需要新增一个标识控制显示目标：

import { useState } from 'react';
import axios from 'axios';
import Button from '@mui/material/Button';

function CoingeckoApiPage2() {
    const [ping, setPing] = useState('');
    const [ping2, setPing2] = useState('');
    // 新增状态标记当前要显示的响应类型
    const [activeResponse, setActiveResponse] = useState('ping');

    const getPing = () => {
        axios.get(CoinGeckoPing()).then(
            res => {
                console.log(res.data);
                setPing(res.data);
                setActiveResponse('ping');
            }
        );
    };

    const getPing2 = () => {
        axios.get(CoinGeckoCurrencies()).then(
            res => {
                console.log(res.data);
                // 修复状态更新目标
                setPing2(res.data);
                setActiveResponse('ping2');
            }
        );
    };        

    return (
        <div>
            <Button onClick={getPing} variant="contained" color="bluecustom" > GET1</Button>         
            <Button onClick={getPing2} variant="contained" color="bluecustom">GET2</Button>
                                         
            <div>
                {activeResponse === 'ping' ? JSON.stringify(ping) : JSON.stringify(ping2)}
            </div>                               
        </div>
    );
}

export default CoingeckoApiPage2;

补充说明 #

• 优先选择第一种方案，它减少了冗余状态，后续新增按钮时无需额外添加状态变量，扩展性更强；
• 加入错误处理逻辑，避免API请求失败时页面无反馈；
• 用async/await替代.then链式调用，提升代码可读性（你也可以保留原.then写法，不影响功能）。

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