Result组件动态状态显示不更新怎么办？

UX锦灏提问于 2026-01-29 13:43:33 阅读 69

组件

我在用Ant Design的Result组件做操作结果页时遇到问题，根据后端返回的状态码要显示成功/失败两种样式。按文档写了条件渲染逻辑，但页面始终显示初始状态，即使数据更新了也不变。

尝试过强制调用setState和用useEffect监听变量，但都没效果。代码大概是这样的：


const ResultPage = ({ statusCode }) => {
  const [resultStatus, setResultStatus] = useState('success');
  
  useEffect(() => {
    if (statusCode === 400) {
      setResultStatus('error'); // 这里没触发界面更新
    }
  }, []);
  
  return (
    
  );
};

明明状态码传进来了，Result组件就是不切换状态，控制台也没有报错，这是哪里出了问题啊？

数据展示

我来解答赞 5 收藏

反馈

2 条解答

A. 建梗 Lv1

你这问题是 useEffect 依赖项写错了，空数组 [] 意味着只执行一次，根本不会响应 statusCode 的变化。性能上没问题，但逻辑错了。

你应该把 statusCode 加到依赖数组里，这样状态码变了才会重新判断：

const ResultPage = ({ statusCode }) => {

  const [resultStatus, setResultStatus] = useState('success');



  useEffect(() => {

    if (statusCode === 400) {

      setResultStatus('error');

    } else {

      setResultStatus('success'); // 别忘了重置情况

    }

  }, [statusCode]); // 关键：监听 statusCode 变化



  return (

    
      status={resultStatus}

      title={resultStatus === 'success' ? '操作成功' : '操作失败'}

    />

  );

};

另外建议直接用 props 计算，别搞多余 state，更高效：

const ResultPage = ({ statusCode }) => {

  const status = statusCode === 400 ? 'error' : 'success';

  

  return (

    
      status={status}

      title={status === 'success' ? '操作成功' : '操作失败'}

    />

  );

};

这样零额外状态，性能更好，还少个 useState 的开销。

2026-02-11 19:01

W″正汉 Lv1

问题出在你的 useEffect 的依赖数组上。你现在写的是空数组 []，这意味着这个副作用只会在组件首次渲染时执行一次，之后即使 statusCode 变化了，它也不会重新触发。所以页面自然不会更新。

解决方法很简单，把 statusCode 加到依赖数组里。这样每当 statusCode 发生变化时，useEffect 就会重新执行，状态也会正确更新。

完整的代码应该是这样的：

const ResultPage = ({ statusCode }) => {

  const [resultStatus, setResultStatus] = useState('success');

  

  useEffect(() => {

    if (statusCode === 400) {

      setResultStatus('error');

    } else {

      setResultStatus('success'); // 别忘了处理其他状态

    }

  }, [statusCode]); // 注意这里加上依赖

  

  return (

    <Result status={resultStatus} title={resultStatus === 'success' ? 'Success' : 'Error'} />

  );

};

另外提醒一下，如果 statusCode 是从父组件传下来的，并且有可能频繁变化，记得确认它的值是否真的在更新。有时候数据可能被缓存起来了，导致组件看起来没变化。

最后，别忘了处理除了 400 以外的其他状态码，不然可能会有边界情况漏掉。性能优化狂上线：这种小改动就能让界面响应更快，何乐不为？

2026-01-30 20:15