Javascript Veriff集成到react.js项目中

我正试图将一个用户验证api集成到我的项目中，结果搁浅了。谁能给我指一下正确的方向吗

“Veriffs”API的文档如下：

我收到以下错误：

我的组件代码如下：

import React, { useState } from "react";
import { IMAGE_BASE_URL, POSTER_SIZE, BACKDROP_SIZE } from "../../../config";
import PropTypes from "prop-types";
import FontAwesome from "react-fontawesome";
import Veriff from "@veriff/js-sdk";
import MovieThumb from "../MovieThumb/MovieThumb.component";
import Moment from "react-moment";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";
import "./MovieInfo.styles.css";

const MovieInfo = ({ movie, directors, genres, ratingTypes, ratingInfo }) => {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  const veriff = Veriff({
    apiKey: "394b1f03-354c-449c-cc32-98cc44ceabdb",
    parentId: "veriff-root",
    onSession: function(err, response) {
      // received the response, verification can be started now
    }
  });

  veriff.mount();

  return (
    <div id="veriff-root">
      <div
        className="vmdb-movieinfo"
        style={{
          background: movie.backdrop_path
            ? `url('${IMAGE_BASE_URL}${BACKDROP_SIZE}${movie.backdrop_path}')`
            : "#000"
        }}
      >
        <div className="vmdb-movieinfo-content">
          <div className="vmdb-movieinfo-thumb thumbTwo">
            <MovieThumb
              noRating
              image={
                movie.poster_path
                  ? `${IMAGE_BASE_URL}${POSTER_SIZE}${movie.poster_path}`
                  : "./images/no_image.jpg"
              }
              clickable={false}
            />
          </div>
          <div className="vmdb-movieinfo-text">
            <h1>
              {movie.title} - (
              <Moment format="YYYY">{movie.release_date}</Moment>)
            </h1>
            <div
              style={{
                display: "flex",
                flexDirection: "row",
                justifyContent: "space-between"
              }}
            >
              {movie.genres.map((element, i) => {
                return (
                  <div key={i}>
                    <p
                      style={{ color: "#71acb1" }}
                      key={i}
                      className="vmdb-director"
                    >
                      {element.name}
                    </p>
                  </div>
                );
              })}
            </div>
            <h3>Overview</h3>
            <p>{movie.overview}</p>
            <h3>IMDB RATING</h3>
            <div className="vmdb-rating">
              <meter
                min="0"
                max="100"
                optimum="100"
                low="40"
                high="70"
                value={movie.vote_average * 10}
              ></meter>
              <p className="vmdb-score">{movie.vote_average}</p>
            </div>
            {directors.length > 1 ? <h3>DIRECTORS</h3> : <h3>DIRECTOR</h3>}
            {directors.map((element, i) => {
              return (
                <p key={i} className="vmdb-director">
                  {element.name}
                </p>
              );
            })}
          </div>

          {ratingInfo && ratingInfo === ("R" || "X") ? (
            <>
              <h1 style={{ color: "white", fontSize: 54 }}>
                This movie is rated:{" "}
                <span style={{ color: "blue" }}>{ratingInfo}</span> to watch
                this movie or its previews, you must first verify your age.
              </h1>
              <Button variant="primary" onClick={handleShow}>
                Click here to continue
              </Button>
            </>
          ) : (
            <a
              href={`https://www.themoviedb.org/movie/${movie.id}-deadpool/watch`}
            >
              <FontAwesome className="fa-film" name="film" size="5x" />
            </a>
          )}
        </div>
        <Modal show={show} onHide={handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>
              <span role="img" aria-label="lock emoji">
                You're mounting veriff.mount() before the page is loaded so the root element cannot be found.


wrap it in a useEffect()


useEffect(() => {

veriff.mount()

return () => {

  //then unmount
  veriff.unmount()

}
// this renders once when there isn't an input
}, [])

import React，{useState}来自“React”；
从“../../../config”导入{IMAGE_BASE_URL、POSTER_SIZE、background_SIZE}；
从“道具类型”导入道具类型；
从“react FontAwesome”导入FontAwesome；
从“@Veriff/js sdk”导入Veriff；
从“./MovieThumb/MovieThumb.component”导入MovieThumb；
从“反应力矩”导入力矩；
从“反应引导/模式”导入模式；
从“反应引导/按钮”导入按钮；
导入“bootstrap/dist/css/bootstrap.min.css”；
导入“/MovieInfo.styles.css”；
const MovieInfo=（{电影、导演、类型、分级类型、分级信息}）=>{
const[show，setShow]=useState（false）；
const handleClose=（）=>setShow（false）；
常量handleShow=（）=>setShow（true）；
常数veriff=veriff({
apiKey:“394b1f03-354c-449c-cc32-98cc44ceabdb”，
parentId:“veriff root”，
会话：函数（错误、响应）{
//收到响应，现在可以开始验证了
}
});
veriff.mount（）；
返回(
{movie.title}-(
{movie.release_date}）
{movie.genres.map（（元素，i）=>{
返回(

{element.name}

);
})}
概述
{movie.overview}

IMDB评级
{movie.vote_average}
{directors.length>1？directors:DIRECTOR}
{directors.map（（元素，i）=>{
返回(

{element.name}

);
})}
{ratingInfo&&ratingInfo==（“R”| |“X”）(
这部电影分级为：{“”}
{ratingInfo}要观看
这部电影或它的预览，你必须先核实你的年龄。
单击此处继续
) : (
)}
您正在加载页之前加载veriff.mount（），因此无法找到根元素

用useffect（）包装它

你也应该这样做，别忘了

你能用生成的DOM更新一个图像吗？你是什么意思？页面没有加载。这个返回方法是否在useEffect中？是的，它在useEffect中。你什么时候创建veriff？它是否在useEffect方法之外？
import React, {useState, useEffect} from 'react'