React产品筛选时出现TypeError: Cannot read properties of undefined错误

错误原因 #

出现该错误的核心问题有三点：

• 部分产品对象的name字段不存在（为undefined），直接调用toString()触发报错
• 未处理productos初始加载时的空值状态（比如接口请求完成前productos是undefined或null）
• filter回调里返回element是错误逻辑，filter需要返回布尔值判断是否保留当前元素

修复步骤 #

• 先校验productos是否为有效数组，避免空值调用filter
• 对element.name做空值兜底，确保调用toString()前值存在
• 修正filter的返回逻辑，返回布尔值而非元素本身
• 新增状态存储筛选后的结果，不要直接修改原始productos，避免原始数据丢失无法恢复

修改后的完整代码 #

function Productos(){  
    const {loading, productos, setProductos} = useFetchProducts()
    const [buscar, setBuscar] = useState("");
    // 新增状态存储筛选后的产品，保留原始数据
    const [filteredProductos, setFilteredProductos] = useState(productos || []);

    const handleChange = e =>{
        const inputValue = e.target.value;
        setBuscar(inputValue);
        filtrar(inputValue);
    }

    const filtrar = (inputBusqueda) =>{
        // 先判断productos是否为有效数组，避免空值调用filter
        if (!productos || !Array.isArray(productos)) {
            setFilteredProductos([]);
            return;
        }
        const resultado = productos.filter((element) =>{
            // 对element.name做兜底处理，避免undefined调用toString
            const productName = (element.name ?? "").toString().toLowerCase();
            const searchValue = inputBusqueda.toLowerCase();
            // 返回布尔值判断是否保留当前元素
            return productName.includes(searchValue);
        });
        setFilteredProductos(resultado);
    }

    // 组件挂载或原始productos变化时，重置筛选结果
    useEffect(() => {
        setFilteredProductos(productos || []);
    }, [productos]);

    return (
        <>
            <Loading loading={loading}>
                <div style={style.buscar}>
                    <input type="text" value={buscar} onChange={handleChange} />
                    <Button variant="primary" type="submit" style={style.button}>Buscar</Button>
                </div>
                
                <div>
                    {/* 传入筛选后的产品数据到Tabla组件 */}
                    <Tabla productos={filteredProductos}/>
                </div>
            </Loading>
        </>
    );
}

export default Productos;

额外说明 #

• 使用??空值合并运算符为element.name兜底为空字符串，确保后续toString()调用不会报错
• 新增filteredProductos状态存储筛选结果，避免修改原始productos，接口数据更新或搜索框清空时能自动恢复全量产品
• 新增useEffect监听productos变化，确保原始数据更新时筛选结果同步重置

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