React应用Input元素不显示求助：window.innerWidth响应式逻辑失效

• 问题根源：你直接在JSX里用window.innerWidth做判断，这个值只会在组件首次渲染时读取一次。如果组件挂载时窗口宽度≥991，后续就算缩小窗口，组件也不会重新计算这个条件，所以Input容器永远不会出现在DOM节点中。

• 正确实现方式：用React的状态管理窗口宽度，同时监听窗口resize事件更新状态，这样窗口尺寸变化时组件会自动重新渲染，条件判断也会实时生效。

完整代码示例：

import { useState, useEffect } from 'react';
import BiSolidDownArrow from 'react-icons/bi';

function TrendsComponent() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
  const [showArray, setShowArray] = useState(false);
  // 假设selectCategory和storedArray为已定义变量

  useEffect(() => {
    // 定义更新窗口宽度的处理函数
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    // 为窗口添加resize监听
    window.addEventListener('resize', handleResize);

    // 组件卸载时清理监听，避免内存泄漏
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <div className='Trends'>
      <div>
        <h4 className='trend-head'>TRENDING ITEMS</h4>
      </div>

      {windowWidth < 991 ? ( 
        <div className='input-arrow'>
          <input type="text" placeholder={selectCategory || 'All'} className='trend-input' />
          <BiSolidDownArrow className='dr-arrow' onClick={() => setShowArray(!showArray)} />
        </div>
      ) : (
        <div className='Array-div'>
          <ul>
            {storedArray}
          </ul>
        </div>
      )}
    </div>
  );
}

export default TrendsComponent;

• 性能优化建议：如果担心resize事件触发过于频繁影响性能，可以给处理函数添加防抖逻辑：

// 防抖工具函数
const debounce = (func, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
};

// 在useEffect中使用防抖后的处理函数
const handleResize = debounce(() => {
  setWindowWidth(window.innerWidth);
}, 200); // 200ms延迟，可根据需求调整

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