Javascript react render html:TypeError:无法读取属性'；长度'；未定义的

我需要用

react quill

制作一个bubble富文本编辑器，当我尝试用富编辑器制作内容时，效果很好。但是，当我尝试使用

react render html

从数据库中提取数据时，它不起作用。显示如下错误：

TypeError: Cannot read property 'length' of undefined
push../node_modules/react-render-html/node_modules/parse5/lib/tokenizer/preprocessor.js.module.exports.push../node_modules/react-render-html/node_modules/parse5/lib/tokenizer/preprocessor.js.Preprocessor.write
C:/Users/alami/OneDrive/Desktop/MERN stack/online shopping/client/node_modules/react-render-html/node_modules/parse5/lib/tokenizer/preprocessor.js:91
  88 |     else
  89 |         this.html = chunk;
  90 | 
> 91 |     this.lastCharPos = this.html.length - 1;
  92 |     this.endOfChunkHit = false;
  93 |     this.lastChunkWritten = isLastChunk;
  94 | };

我用这种方式尝试了代码：

import React, { useEffect, useState } from "react";
import { Button, Descriptions } from "antd";
import renderHTML from "react-render-html";

function ProductInfo(props) {
  const [Product, setProduct] = useState({});
  useEffect(() => {
    setProduct(props.detail);
  }, [props.detail]);

  return (
    <div>
      <Descriptions title="Product Info">
        <Descriptions.Item label="Price">${Product.price}</Descriptions.Item>
        <Descriptions.Item label="Sold">{Product.sold}</Descriptions.Item>
        <Descriptions.Item label="View">{Product.views}</Descriptions.Item>
        <Descriptions.Item label="Description">
          <div>{renderHTML(Product.desc)}</div>
        </Descriptions.Item>
      </Descriptions>

      <br />
      <br />
      <br />
      <div style={{ display: "flex", justifyContent: "center" }}>
        <Button shape="round" type="danger">
          Contact me
        </Button>
      </div>
    </div>
  );
}

export default ProductInfo;

import React，{useffect，useState}来自“React”；
从“antd”导入{按钮，说明}；
从“react render html”导入renderHTML；
功能ProductInfo（道具）{
const[Product，setProduct]=useState（{}）；
useffect（（）=>{
setProduct（道具细节）；
}，[props.detail]）；
返回(
${Product.price}
{产品已售出}
{Product.views}
{renderHTML（Product.desc）}






联系我
);
}
导出默认产品信息；

如果我从

{renderHTML（Product.desc）}

中删除了

renderHTML

，那么它就工作了，但是输出show me

html

code不会显示平面文本

---

请提供任何建议。

根据我的经验，它的Product.desc是以异步方式获取的，因此在某个时候它将是未定义的。因此，当renderHTML试图获取长度时，它会在某个点上，在抓取完成之前，尝试获取未定义的长度

试试这个：

<Descriptions.Item label="Description">
          {Product.desc ? <div>{renderHTML(Product.desc)}</div> : null}
        </Descriptions.Item>

{Product.desc？{renderHTML（Product.desc）}:null}

根据我的经验，它的Product.desc是以异步方式获取的，因此在某个时候它将是未定义的。因此，当renderHTML试图获取长度时，它会在某个点上，在抓取完成之前，尝试获取未定义的长度

试试这个：

<Descriptions.Item label="Description">
          {Product.desc ? <div>{renderHTML(Product.desc)}</div> : null}
        </Descriptions.Item>

{Product.desc？{renderHTML（Product.desc）}:null}

您不需要状态，因为没有任何变化。相反，只需传递道具。细节

import React，{useffect，useState}来自“React”；
从“antd”导入{按钮，描述}；
从“react render html”导入renderHTML；
功能ProductInfo（道具）{
返回(
${props.detail.price}
{props.detail.selled}
{props.detail.views}
{renderHTML（props.detail.desc）}






联系我
);
}
导出默认产品信息；

您不需要状态，因为没有任何变化。相反，只需传递道具。细节

import React，{useffect，useState}来自“React”；
从“antd”导入{按钮，描述}；
从“react render html”导入renderHTML；
功能ProductInfo（道具）{
返回(
${props.detail.price}
{props.detail.selled}
{props.detail.views}
{renderHTML（props.detail.desc）}






联系我
);
}
导出默认产品信息；

也许您的逻辑与我所做的几乎相同，不幸的是，我遇到了相同的错误。然后您的组件需要处理props.detail未定义的情况。谢谢，我用这个逻辑解决了问题：

{Product.desc？{renderHTML（Product.desc）}:null}

也许您的逻辑与我所做的几乎相同，不幸的是，我遇到了同样的错误。然后，当props.detail未定义时，您的组件需要处理这种情况。谢谢，我通过以下逻辑解决了这个问题：

{Product.desc？{renderHTML（Product.desc）}:null}

谢谢，它正在工作。谢谢，伙计，它正在工作