React中调用API后用if/else更改变量值视图不更新如何解决

问题根因 #

• React 不会监听普通 JS 变量的变化，只有状态变量更新时才会触发组件重新渲染，你定义的special是普通变量，修改后自然不会触发页面更新。
• 你当前把 axios 请求直接写在组件函数体内，组件每次渲染都会重复发起接口请求，存在性能问题和逻辑风险。
• 补充：你代码里的内层循环条件存在笔误for(var j = 0; j = returnedInfo.length; j++)，这里是赋值操作不是判断，会导致循环逻辑异常，建议修正为j < returnedInfo.length。

解决方法 #

用 React 提供的useState钩子定义状态变量存储比对结果，用useEffect钩子包裹接口请求，保证请求仅在组件挂载时触发一次。

修正后完整代码如下：

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

function QuantityBtn() {
  const theIds = [{'id': 1, 'value': "one"}, {'id': 2, 'value': 'two'}]
  // 用useState定义状态变量，更新状态会触发重渲染
  const [special, setSpecial] = useState(null);

  const findData = {
    method: 'GET',
    url: "/api/",
    headers: {
      'Content-Type': 'application/json',
    },      
  };

  // 用useEffect包裹请求，空依赖数组表示仅组件挂载时执行一次
  useEffect(() => {
    axios(findData)     
    .then(function(data) {
      const returnedInfo = data.data;
      // 简化比对逻辑：先把返回结果的id存成Set，方便快速查找
      const returnedIdSet = new Set(returnedInfo.map(item => item.id));
      // 检查theIds里有没有id存在于返回结果中
      const hasMatch = theIds.some(idItem => returnedIdSet.has(idItem.id));
      // 更新状态，触发重渲染
      setSpecial(hasMatch);
    })   
    .catch(err => console.error(err))
  }, []);

  return (
    <div className="miTest">
      {/* 可自定义展示内容，比如true显示Hello false显示Goodbye，对应你提到的Angular效果 */}
      {special ? 'Hello' : 'Goodbye'}
      {/* 如需直接展示布尔值可转成字符串避免不显示：{String(special)} */}
    </div>
  )
}

实现逻辑说明 #

1. 组件挂载后，useEffect内的接口请求触发，拿到后端返回数据
2. 比对theIds和返回结果的id，生成布尔值结果
3. 调用setSpecial更新状态，React 自动触发组件重新渲染，页面渲染最新的状态值

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