React Native：状态值相同时如何重新渲染组件？

问题描述 #

我有一个模态框，用户可选择查看更多同类商品（为简化说明以商品为例）。若无结果，我会将state设为false，展示<NoResults />组件。但当用户再次选择仍无结果时，由于boolean状态已为false，useState未收到新值，组件不会重新渲染。我希望每次都能弹出无结果提示模态框，如何在不使用forceUpdate等不良实践的前提下实现组件重新渲染？

用户提供的代码示例：

const App = ({route}) => {
    const [more, setMore] = useState(true);
    
    const findItem = (id) => { //triggered from a popup
      const res =  API.find...
        if (res) {
            setMore(true)
        } else {
            setMore(false)
        }
    }
    return (
        {!more ? <NoResults /> : <Results />}
    )
}

解决方案 #

1. 使用带请求标识的复合状态 #

放弃单一布尔值状态，改用包含结果状态和唯一请求标识的对象。每次发起请求时更新标识（比如时间戳），确保状态始终是新的引用，强制组件渲染：

const App = ({route}) => {
    // 用对象存储状态，包含结果状态和请求ID
    const [searchState, setSearchState] = useState({ hasResults: true, requestId: 0 });
    
    const findItem = (id) => {
      const res = API.find...;
      // 每次请求生成新的requestId，确保状态更新
      setSearchState({
        hasResults: !!res,
        requestId: Date.now()
      });
    }
    
    return (
        {!searchState.hasResults ? <NoResults key={searchState.requestId} /> : <Results />}
    )
}

给<NoResults />添加key属性后，每次requestId变化时，React会销毁旧组件实例并创建新实例，确保模态框的显示逻辑能重新触发。

2. 分离模态框显隐状态 #

单独维护一个控制<NoResults />显示的状态，每次检测到无结果时强制更新该状态，和结果状态解耦：

const App = ({route}) => {
    const [hasResults, setHasResults] = useState(true);
    const [showNoResults, setShowNoResults] = useState(false);
    
    const findItem = (id) => {
      const res = API.find...;
      setHasResults(!!res);
      // 只要无结果就触发显示，不受之前状态影响
      if (!res) {
          setShowNoResults(true);
          // 可选：添加自动关闭逻辑
          setTimeout(() => setShowNoResults(false), 2000);
      }
    }
    
    return (
        <>
            {hasResults ? <Results /> : null}
            {showNoResults ? <NoResults /> : null}
        </>
    )
}

这种方式把数据结果状态和UI提示状态分开，确保每次无结果时都能触发模态框的渲染。

3. 用useRef记录请求次数并结合状态更新 #

通过useRef跟踪请求次数，每次请求时更新计数，同时将计数并入状态对象，保证状态引用始终更新：

const App = ({route}) => {
    const [searchState, setSearchState] = useState({ hasResults: true, requestCount: 0 });
    const requestCountRef = useRef(0);
    
    const findItem = (id) => {
      const res = API.find...;
      requestCountRef.current += 1;
      setSearchState({
        hasResults: !!res,
        requestCount: requestCountRef.current
      });
    }
    
    return (
        {!searchState.hasResults ? <NoResults /> : <Results />}
    )
}

每次请求后requestCount都会递增，状态对象成为新引用，必然触发组件重新渲染。

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