React Hooks组件渲染时数据显示异常问题排查与解决

问题描述 #

组件中通过useEffect钩子实现页面首次加载时请求接口数据：

useEffect(() => {
    axios
      .get("http://127.0.0.1:5000/v1/matches")
      .then((response) => {
        getStatusCode(response.data.code);
        console.log("responseCode",responseCode);
        getMatchdata(response.data.result);
        setInfo(<MatchData responseCode={responseCode} matchdata={matchdata} />);
      })
      .catch((error) => console.log(error));
      
  },[]);

对应的状态定义：

const [info, setInfo] = useState();

期望在<div> {info} </div>中渲染正确数据，但首次加载显示错误；而点击按钮触发的refresh函数却能正常显示：

function refresh() {
    setInfo(<MatchData responseCode={responseCode} matchdata={matchdata} />);
}

需求是实现页面首次加载获取接口数据，并随状态变化动态更新页面内容。

错误原因 #

1. 状态更新的异步特性：React的状态更新（包括getStatusCode、getMatchdata这类状态修改函数）是异步操作。在axios的then回调里调用这些函数后，立刻读取responseCode和matchdata，拿到的还是更新前的旧值，导致首次加载时传给MatchData的是无效数据。
2. 状态存储逻辑错误：直接将<MatchData />这个React元素存入info状态的做法不符合React设计逻辑。状态应该存储原始业务数据，而非已渲染的组件元素，渲染逻辑应直接写在组件的JSX部分。

修复方案 #

1. 调整状态定义 #

改为存储接口返回的原始数据，而非React元素：

// 分别定义状态存储状态码和匹配数据
const [responseCode, setResponseCode] = useState(null);
const [matchdata, setMatchdata] = useState([]);
// 移除原有的info状态

2. 修改useEffect逻辑 #

在接口回调中直接更新状态，避开异步更新的陷阱：

useEffect(() => {
    axios
      .get("http://127.0.0.1:5000/v1/matches")
      .then((response) => {
        // 直接更新状态，React会自动处理后续渲染
        setResponseCode(response.data.code);
        setMatchdata(response.data.result);
      })
      .catch((error) => console.log(error));
}, []);

3. 调整页面渲染逻辑 #

直接在JSX中根据状态渲染组件，无需通过info中转：

<div>
  {/* 增加空值判断，避免状态未就绪时渲染报错 */}
  {responseCode !== null && matchdata.length > 0 && (
    <MatchData responseCode={responseCode} matchdata={matchdata} />
  )}
</div>

4. 优化refresh函数 #

刷新时只需重新请求接口并更新状态，无需直接设置组件元素：

function refresh() {
    axios
      .get("http://127.0.0.1:5000/v1/matches")
      .then((response) => {
        setResponseCode(response.data.code);
        setMatchdata(response.data.result);
      })
      .catch((error) => console.log(error));
}

方案说明 #

• 状态存储原始数据符合React单向数据流设计，状态更新后React会自动触发组件重渲染，确保页面显示最新数据。
• 避开了异步状态更新的陷阱，无需在回调中立刻读取刚更新的状态，由React负责状态变化后的渲染逻辑。

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