ReactJS: Как я могу взять JSON-запись от пользователя и опубликовать в API? - PullRequest
Новая
       16

ReactJS: Как я могу взять JSON-запись от пользователя и опубликовать в API?

0 голосов
/ 08 июля 2019

У меня есть таблица с именем и записью json в виде столбца. Я хочу создать форму, которая берет имя в виде строки и json-записи в формате JSON, используя ReactJS, и опубликовать ее в Phoenix API.

PS: я новичок в ReactJS. Извините, если это очень глупо. 

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>
    );
  }
}

Ошибка 1: для типа '{}' отсутствуют следующие свойства из типа 'JSON': parse, stringify Ошибка 2: тип «JSON» нельзя назначить типу «строка»

Ответы [ 2 ]

1 голос
/ 08 июля 2019

Если пользователь должен ввести 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()...
}
1 голос
/ 08 июля 2019

Ошибка 1:
Я полагаю, вы хотите, чтобы asset_meta_attribute был объектом.У вас есть три варианта

  • Определить тип объекта в другом интерфейсе
  • Запись asset_meta_attribute: any;
  • Не использовать машинопись, не определять состояние и не изменять свой кодна export default class Form extends React.Component { (я бы советовал против этой опции)

Ошибка 2:
Тип входного элемента определяется как строка.Для возможных типов проверьте эту ссылку:
https://www.w3schools.com/tags/att_input_type.asp

...