如何修复React未挂载组件状态更新及socialNetwork.map报错问题

1. 解决 socialNetwork.map 不是函数的错误 #

• 问题根源：Algolia返回的hit['Social Network']可能为null、undefined或非数组类型，直接调用map会触发类型错误。
• 修复方式：先对字段做数组类型校验，默认赋值为空数组，确保只有数组才执行map操作：

  const socialNetwork = Array.isArray(hit['Social Network']) ? hit['Social Network'] : [];
  

2. 解决组件卸载后状态更新的内存泄漏警告 #

• 问题根源：组件切换卸载后，useEffect中的状态更新逻辑仍在执行，导致在未挂载组件上更新状态。
• 修复方式：添加挂载状态标志，在调用setState前检查组件是否仍处于挂载状态，同时移除清理函数中不必要的setState调用：

  useEffect(() => {
    let isMounted = true;
    // ... 其他逻辑
    if (isMounted) {
      setSocialNetworkHtml(newSocialNetworkHtml);
    }
    return () => {
      isMounted = false;
    };
  }, [hit]);
  

3. 优化图片渲染的健壮性 #

• 确保network值与图片文件名完全匹配（包括大小写），避免资源查找失败。
• 可选：添加图片加载失败的 fallback 逻辑，显示默认图标：

  <img 
    className='small-logo' 
    src={require(`../../assets/socialNetworks/${network}.png`)}
    onError={(e) => e.target.src = require('../../assets/socialNetworks/default.png')}
  />
  

完整修复后的代码 #

const Hit = ({hit}) => {
    const [socialNetworkHtml, setSocialNetworkHtml] = useState([]);

    useEffect(() => {
        let isMounted = true;
        const socialNetwork = Array.isArray(hit['Social Network']) ? hit['Social Network'] : [];
        const newSocialNetworkHtml = socialNetwork.map((network, index) => (
            <span key={index}>
                <img 
                    className='small-logo' 
                    src={require(`../../assets/socialNetworks/${network}.png`)}
                    onError={(e) => e.target.src = require('../../assets/socialNetworks/default.png')}
                />
            </span>
        ));

        if (isMounted) {
            setSocialNetworkHtml(newSocialNetworkHtml);
        }

        return () => {
            isMounted = false;
        };
    }, [hit]);

    return (
        <div className="hit-card">
            <a target="_blank" rel="noreferrer" href={`${hit.Website}`}>
                <div style={{ backgroundImage: `url(${hit.Image})` }} className="card-image"></div>
                <h4 className="hit-name">
                    <Highlight attribute="Name" hit={hit} />
                </h4>
                <b>Used for :</b>
                {socialNetworkHtml}
                <b>Works on:</b><br/>
                <p className='hit-card--details'> {hit.Deployment}</p>
            </a>
        </div>
    );
}

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