React组件中从state获取指定对象返回undefined如何解决？

核心错误：变量名拼写不一致 #

你的findProperty函数里，声明的变量是propertyReturn，但赋值时误用了propertyToReturn，这导致最终propertyReturn始终为undefined，自然返回结果不对。

额外问题：无限重渲染与空值访问 #

1. 直接在组件顶层调用findProperty并执行setProperty，会触发组件无限重渲染——每次setProperty更新state都会引发组件重新渲染，而渲染时又会再次调用findProperty执行setProperty，形成循环。
2. 初始property state为undefined，直接访问property.propertyName会抛出Cannot read properties of undefined错误。
3. 未处理propertyState.properties可能为空的边界情况。

修正后的代码 #

const PropertyComponent = () => {
    const { propertyId } = useParams();

    const propertyState: IPropertiesState = useSelector(
        propertiesStateSelector
    );

    const [property, setProperty] = useState<IProperty | undefined>(undefined);

    useEffect(() => {
        // 处理properties为空的情况
        if (!propertyState?.properties?.length) return;

        // 用数组find方法简化查找逻辑，替代for循环
        const found = propertyState.properties.find(
            item => item.propertyId === propertyId
        );

        setProperty(found);
    }, [propertyId, propertyState.properties]); // 依赖项变化时才执行

    // 空值保护，避免访问undefined的属性
    if (!property) {
        return <div>加载中...</div>;
    }

    return <>{property.propertyName}</>;
}

export default PropertyComponent;

关键优化点 #

• 修复变量名拼写错误，改用Array.find简化查找逻辑，更简洁不易出错。
• 使用useEffect包裹查找和state更新逻辑，只有当propertyId或propertyState.properties变化时才执行，避免无限重渲染。
• 增加空值判断，在property未找到时显示加载态，防止报错。
• 给useState添加类型注解，提升代码类型安全性。

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