ReactJS：如何从用户获取JSON条目并发布到API中？

我有一个表，它有一个名称和一个json条目作为列。我想制作一个表单，使用ReactJS以字符串形式获取名称，以json格式获取json条目，并将其发布到Phoenix API

附言：我是新手。对不起，如果这很愚蠢的话

interface Mystate
{
    asset_meta_label: string;
    asset_meta_attribute: JSON;
}

export default class Form extends React.Component<{}, Mystate> {
  constructor(props: {}) {
    super(props);
    this.state = {
        asset_meta_label: '',
        asset_meta_attribute: {}   //Error: Type '{}' is missing the following properties from type 'JSON': parse, stringify
      };

      this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit (event) 
  {
    event.preventDefault();
    fetch('/api/create', {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        asset_class_meta: 
        {
            asset_meta_label: this.state.asset_meta_label,
            asset_meta_attribute: this.state.asset_meta_attribute
        }
    })
    })

    }

    handleAssetClassMeta(event) {
        this.setState({ asset_meta_label: event.target.value })
    }

    handleAssetMetaAttribute(event) {
        this.setState({ asset_meta_attribute: event.target.value })
      }

  public render(): JSX.Element {

    return (
      <Main>
      <h1>Add Asset Details</h1>

      <form onSubmit={this.handleSubmit}>
        <div className="field">
            <label className="label">Asset Class</label>
            <div className="control">
                <input 
                    className="input" 
                    type="text"
                    placeholder="Enter Asset Id"
                    value = {this.state.asset_meta_label}
                    onChange = {this.handleAssetClassMeta.bind(this)}
                />
            </div>
        </div>
        <br />
        <div className="field">
            <label className="label">Asset Class Attributes</label>
            <div className="control">
                <input 
                    className="input" 
                    type={JSON}    //Error: Type 'JSON' is not assignable to type 'string'
                    placeholder="Enter Asset Class"
                    value = {this.state.asset_meta_attribute}    //Type 'JSON' is not assignable to type 'string | number | string[] | undefined'.
                    onChange = {this.handleAssetMetaAttribute.bind(this)}
                />
            </div>
        </div>
            <br />
            <br />
            <button
                type="submit"
                value="Submit"
                className="button is-primary">
                Submit
            </button>
        </form>
        <button>
          <Link to="/">Back to home</Link>
        </button>
      </Main>
    );
  }
}

接口Mystate
{
资产元标签：字符串；
资产元属性：JSON；
}
导出默认类表单扩展React.Component{
构造函数（props:{}）{
超级（道具）；
此.state={
资产元标签：“”，
asset_meta_属性：{}//错误：类型{}缺少类型“JSON”中的以下属性：parse、stringify
};
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleSubmit（事件）
{
event.preventDefault（）；
获取（'/api/create'{
方法：“POST”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify({
资产类别元：
{
资产元标签：this.state.asset元标签，
资产元属性：this.state.asset元属性
}
})
})
}
handleAssetClassMeta（事件）{
this.setState（{asset\u meta\u label:event.target.value}）
}
handleAssetMetaAttribute（事件）{
this.setState（{asset\u meta\u attribute:event.target.value}）
}
public render（）：JSX.Element{
返回(
添加资产详细信息
资产类别


资产类别属性




提交
回家
);
}
}

错误1:类型“{}”缺少类型“JSON”中的以下属性：parse、stringify 错误2:类型“JSON”不可分配给类型“string”

错误1:
我想您希望asset\u meta\u属性是一个对象。你有三个选择

• 在另一个接口中定义对象的类型
• 写入

  asset\u meta\u属性：any

• 不要使用typescript，不要定义状态并将代码更改为

  导出默认类表单extends React.Component{

  （我建议不要使用此选项）

错误2:
输入元素类型定义为字符串。有关可能的类型，请检查此链接：
错误1:
我想您希望asset\u meta\u属性是一个对象

• 在另一个接口中定义对象的类型
• 写入

  asset\u meta\u属性：any；

• 不要使用typescript，不要定义状态并将代码更改为

  导出默认类表单extends React.Component{

  （我建议不要使用此选项）

错误2:
输入元素类型定义为字符串。有关可能的类型，请检查此链接：

---

如果用户必须在文本字段中输入JSON，您可能希望将其定义为字符串，然后对其进行解析：

interface Mystate {
    asset_meta_label: string;
    asset_meta_attribute: string; // define as string type
}

export default class Form extends React.Component<{}, Mystate> {
  constructor(props: {}) {
    super(props);
    this.state = {
      asset_meta_label: '',
      asset_meta_attribute: ''
    };

      this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit (event) {
    event.preventDefault();
    try {
      const parsed_asset_meta_attribute = JSON.parse(this.state.asset_meta_attribute); // try to parse user input
      fetch('/api/create', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          asset_class_meta: {
              asset_meta_label: this.state.asset_meta_label,
              asset_meta_attribute: parsed_asset_meta_attribute // use parsed JSON here (object)
          }
        })
      })
    } catch(err) {
      console.error(err) // failed to parse JSON input
    }
  }
// render()...
}

接口Mystate{
资产元标签：字符串；
资产\元\属性：字符串；//定义为字符串类型
}
导出默认类表单扩展React.Component{
构造函数（props:{}）{
超级（道具）；
此.state={
资产元标签：“”，
资产\元\属性：“”
};
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleSubmit（事件）{
event.preventDefault（）；
试一试{
const parsed_asset_meta_attribute=JSON.parse（this.state.asset_meta_attribute）；//尝试分析用户输入
获取（'/api/create'{
方法：“POST”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify({
资产类别元：{
资产元标签：this.state.asset元标签，
asset\u meta\u属性：已解析的\u asset\u meta\u属性//在此处使用已解析的JSON（对象）
}
})
})
}捕捉（错误）{
console.error（err）//无法解析JSON输入
}
}
//render（）。。。
}

如果用户必须在文本字段中输入JSON，您可能希望将其定义为字符串，然后对其进行解析：

interface Mystate {
    asset_meta_label: string;
    asset_meta_attribute: string; // define as string type
}

export default class Form extends React.Component<{}, Mystate> {
  constructor(props: {}) {
    super(props);
    this.state = {
      asset_meta_label: '',
      asset_meta_attribute: ''
    };

      this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit (event) {
    event.preventDefault();
    try {
      const parsed_asset_meta_attribute = JSON.parse(this.state.asset_meta_attribute); // try to parse user input
      fetch('/api/create', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          asset_class_meta: {
              asset_meta_label: this.state.asset_meta_label,
              asset_meta_attribute: parsed_asset_meta_attribute // use parsed JSON here (object)
          }
        })
      })
    } catch(err) {
      console.error(err) // failed to parse JSON input
    }
  }
// render()...
}

接口Mystate{
资产元标签：字符串；
资产\元\属性：字符串；//定义为字符串类型
}
导出默认类表单扩展React.Component{
构造函数（props:{}）{
超级（道具）；
此.state={
资产元标签：“”，
资产\元\属性：“”
};
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleSubmit（事件）{
event.preventDefault（）；
试一试{
const parsed_asset_meta_attribute=JSON.parse（this.state.asset_meta_attribute）；//尝试分析用户输入
获取（'/api/create'{
方法：“POST”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify({
资产类别元：{
资产元标签：this.state.asset元标签，
asset\u meta\u属性：已解析的\u asset\u meta\u属性//在此处使用已解析的JSON（对象）
}
})
})
}捕捉（错误）{
console.error（err）//无法解析JSON输入
}
}
//render（）。。。
}

非常感谢。您为我节省了很多时间。也就是说，我在api中发布了一些东西。我如何才能在此处获得api的响应并显示它？非常感谢。您为我节省了很多时间。也就是说，我在api中发布了一些东西。我如何才能在此处获得api的响应并显示它？