React项目切换控制按钮时数据未同步的解决方法问询

你的问题出在只用了一个post状态存储A、B两组独立的数据，切换按钮组时没有对显示的数据做区分，导致旧数据残留，出现切换后仍显示前一组数据的问题。

解决方法1：分开维护A和B的数据状态 #

把原来的单个post拆成postA和postB两个状态，分别存储两组数据，渲染时根据当前选中的按钮组显示对应数据，两组数据完全独立，不会互相干扰。

修改后的代码：

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

export function App(props) {
  // 拆分成两个独立状态存储A、B的数据
  const [postA, setPostA] = useState("");
  const [postB, setPostB] = useState("");
  const [showAButton, setShowAButton] = useState(true);

  useEffect(() => {
    console.log(showAButton);
  }, [showAButton]); // 添加依赖项，避免不必要的重复执行

  const handleA = () => {
    axios
      .get("https://jsonplaceholder.typicode.com/todos/1")
      .then((response) => {
        setPostA(response.data);
      })
      .catch((err) => {});
  };

  const handleB = () => {
    axios
      .get("https://jsonplaceholder.typicode.com/todos/2")
      .then((response) => {
        setPostB(response.data);
      })
      .catch((err) => {});
  };

  return (
    <div className="App">
      <div>
        <button onClick={(e) => setShowAButton(!showAButton)}>
          Show Load data A button
        </button>
      </div>
      {showAButton ? (
        <>
          <button onClick={handleA}>Load data A</button>
          {postA ? <Databoard post={postA}></Databoard> : null}
        </>
      ) : (
        <>
          <button onClick={handleB}>Load data B</button>
          {postB ? <Databoard post={postB}></Databoard> : null}
        </>
      )}
    </div>
  );
}

const Databoard = (props) => {
  const { post } = props;
  return (
    <ul>
      <li>{post.userId}</li>
      <li>{post.id}</li>
      <li>{post.title}</li>
    </ul>
  );
};

解决方法2：切换按钮组时重置数据（或自动加载） #

如果不想拆分状态，可以在切换按钮组时清空当前post状态，或者直接自动触发对应按钮的API请求，确保切换后显示的数据与当前按钮组匹配。

示例1：切换时清空数据

修改切换按钮的点击逻辑：

<button onClick={(e) => {
  setShowAButton(!showAButton);
  setPost(""); // 切换时清空数据，避免旧数据残留
}}>
  Show Load data A button
</button>

示例2：切换时自动加载对应数据

<button onClick={(e) => {
  const newShowA = !showAButton;
  setShowAButton(newShowA);
  // 切换后自动调用对应API
  newShowA ? handleA() : handleB();
}}>
  Show Load data A button
</button>

方案对比 #

• 方案1更适合后续扩展（比如新增C、D按钮），数据独立管理，逻辑清晰。
• 方案2改动量小，适合简单场景，无需维护多个状态。

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