如何使用 Typescript 和 React.js 中的随机字段解析 JSON

Question

在 Typescript 中有带有随机字段的Typescript Json string （我不知道json string或其类型中的字段类型）。 想要将json string解析为 object 并使用默认类型的字段，例如string 。

像这样解析： let values = JSON.parse(this.props.values!)

使用 React.js 时出错，因为类型unknown 。 也无法预定义interface ，因为我不知道json string里面的内容

Object.entries(values).map(([key, value]) => {
                renderValues = (
                    <>
                        <div className="col-1 text-left p-2" ></div>
                        <div className="col-2 text-right p-2" >{key}</div>
                        <div className="col-9 text-left p-2" >{value}</div>
                    </>)
            })

有错误：类型“未知”不可分配给类型“ReactNode”。 类型“未知”不可分配给类型“ReactPortal”.ts(2322) index.d.ts(1244, 9)：预期类型来自属性“children”，该属性在“DetailedHTMLProps, HTMLDivElement>”类型上声明

How in typescript when parsing json string to object give to object fields default type or cast object fields to default type?

Answer 1

正如评论的那样； 你可以试试以下方法：

renderValues = Object.entries(values).map(
  ([key: string, value: string]) => (
    <>
      <div className="col-1 text-left p-2"></div>
      <div className="col-2 text-right p-2">{key}</div>
      <div className="col-9 text-left p-2">{value}</div>
    </>
  )
);

请阅读我之前发布的链接，因为您没有正确使用 Array.prototype.map。

Answer 2

If you JSON.parse() giving the error then first you need to verify the source stringify JSON by using online validator such as Json validator or Json. stigify 验证器。 如果这不起作用，请回复。