damp-angle-95696
02/24/2022, 7:39 AM<https://cdn.growthbook.io/api/features/key_dev_xxxxxx>
, the result I got is
{
"status": 200,
"features": {
"should-show-product-title": {
"defaultValue": true
}
}
}
However, when I do useFeature('should-show-product-title').on
, the result is false instead. So, what might be the root cause of these different results?fresh-football-47124
damp-angle-95696
02/24/2022, 9:12 AM_app.tsx
const growthbook = new GrowthBook({
trackingCallback: (experiment, result) => {
console.log({
experimentId: experiment.key,
variationId: result.variationId
})
}
});
function MyApp({ Component, pageProps, cart, categories, user }: Props) {
const windowWidth = useWindowResize();
const getLayout = Component.getLayout || ((page) => !(windowWidth && windowWidth < RWD_BREAK_POINT.md) ? <Desktop>{page}</Desktop> : <Mobile>{page}</Mobile>);
const router = useRouter();
useEffect(() => {
fetch("<https://cdn.growthbook.io/api/features/key_dev_xxx>")
.then((res) => res.json())
.then((parsed) => {
console.log(parsed);
growthbook.setFeatures(parsed);
});
}, [router.pathname]);
...
return (
<SSRProvider>
<GrowthBookProvider growthbook={growthbook}>
<GlobalContextProvider
categories={categories}
user={user}
>
<CartContextProvider
cartProducts={cart}
>
<ModalContextProvider>
{getLayout(<Component {...pageProps} />)}
</ModalContextProvider>
</CartContextProvider>
</GlobalContextProvider>
</GrowthBookProvider>
</SSRProvider>
);
ProductDetail.tsx
import { useFeature } from "@growthbook/growthbook-react";
interface Props {
product: IProduct;
referer: string;
}
function ProductDetail({ product, referer }: Props) {
const windowWidth = useWindowResize();
const newLogin = useFeature('should-show-product-title').on;
return (
<Col md="5" xl="4" className={styles['col-product-detail']}>
<Container fluid className={styles['product-detail']}>
<Row className={`position-relative ${styles['row-product-title']}`}>
{windowWidth && windowWidth < RWD_BREAK_POINT.md ? null : <ProductBreadCrumb referer={referer} productTitle={product.title} />}
{newLogin ? <h2>Hello World</h2> : <h2>{product.title}</h2>}
</Row>
_app.tsx
, I create a growthbook instance and set features via reading cloud api with dev key. Then, wrap my app with GrowthBookProvider
ProductDetail.tsx
I tried to read the value of should-show-product-title
feature which i expect to be true{
"status": 200,
"features": {
"should-show-product-title": {
"defaultValue": true
}
}
}
fresh-football-47124
// Fall back to using the default value
return this.getFeatureResult(
id,
feature.defaultValue ?? null,
"defaultValue"
);
it should default properlydamp-angle-95696
02/24/2022, 9:58 AMfresh-football-47124
future-teacher-7046
damp-angle-95696
02/24/2022, 1:48 PMfuture-teacher-7046
source
property that says why it is getting the value that it is.damp-angle-95696
02/24/2022, 2:15 PMconsole.log(useFeature('should-show-product-title'))
future-teacher-7046
damp-angle-95696
02/24/2022, 2:29 PMfuture-teacher-7046
damp-angle-95696
02/24/2022, 2:41 PMconsole.log()
in that hook, and see the message in browser consolefuture-teacher-7046
unknown feature.