Динамическое значение метатега, такое как изображение, заголовок, описание, не обновляется в теге заголовка в reactjs

Question

Динамическое значение метатега, такое как изображение, заголовок, описание, не обновляется в теге заголовка в reactjs

Я хочу установить динамическое значение для изображения, заголовка и описания в reactjs. Это то, что я сделал

import { useEffect, useState, useRef } from 'react';
const [thumbnail, setThumbnail] = useState('')
const [metaTitle, setMetaTitle] = useState('');
useEffect(() => {
    const run1 = async () => {
      const x = await apis.getVendorDetails({category, region, brandName});
      setVendorData(x.data)
      if(thisVendor == '') thisVendor = vendorData;
    }
    run1();
  }, [])
if(vendorData !=='' && vendorData !== undefined && (facebook == '' && instagram == '' && website == '' && metaTitle == '' && thumbnail == '')){
    setThumbnail(vendorData.allImages !== undefined || vendorData.allImages !== '' ? vendorData.allImages[0] : '')
    setMetaTitle((vendorData.category !== undefined || vendorData.category !== '') ? vendorData.category + ' | ' + vendorData.companyName : '');
  }

return (
        <Layout1 vendorData={vendorData} isLogin={isLogin} customerData={customerData} isLoginCustomer={isLoginCustomer}>
          <Head>
            <meta property="og:title" content={metaTitle}/>
            <meta property="og:image" itemProp="image" content={thumbnail}/>
            <meta property="og:type" content="website"/>
            <meta property="og:image:width" content="256"/>
            <meta property="og:image:height" content="256"/>
          </Head>
</Layou1>
);

Это то, что я пробовал

Мета-значение для содержания изображения и заголовка не обновляется Пожалуйста, помогите мне

0

reactjs image use-state title meta-tags

Источник

user8198146 24 май '20 в 21:07

1 ответ

Другие вопросы по тегам reactjs image use-state title meta-tags

user10296123 24 май '20 в 21:34 2020-05-24 21:34 · Answer 1 · 2020-05-24 21:34

Рассмотрите возможность использования React Helmet:

import { useEffect, useState, useRef } from "react";
import { Helmet } from "react-helmet";

const [thumbnail, setThumbnail] = useState("");
const [metaTitle, setMetaTitle] = useState("");

useEffect(() => {
  const run1 = async () => {
    const x = await apis.getVendorDetails({ category, region, brandName });
    setVendorData(x.data);
    if (thisVendor == "") thisVendor = vendorData;
  };
  run1();
}, []);

if (
  vendorData !== "" &&
  vendorData !== undefined &&
  facebook == "" &&
  instagram == "" &&
  website == "" &&
  metaTitle == "" &&
  thumbnail == ""
) {
  setThumbnail(
    vendorData.allImages !== undefined || vendorData.allImages !== ""
      ? vendorData.allImages[0]
      : ""
  );
  setMetaTitle(
    vendorData.category !== undefined || vendorData.category !== ""
      ? vendorData.category + " | " + vendorData.companyName
      : ""
  );
}

return (
  <Layout1
    vendorData={vendorData}
    isLogin={isLogin}
    customerData={customerData}
    isLoginCustomer={isLoginCustomer}
  >
    <Helmet>
      <meta property="og:title" content={metaTitle} />
      <meta property="og:image" itemProp="image" content={thumbnail} />
      <meta property="og:type" content="website" />
      <meta property="og:image:width" content="256" />
      <meta property="og:image:height" content="256" />
    </Helmet>
  </Layout1>
);