Форма подачи в Реакт

Question

Я пытаюсь отправить форму в React.Эта форма connected one, поэтому данные формы будут поступать как реквизиты.Я пытаюсь добиться того, чтобы форма автоматически отправлялась, когда props are different, что означает, что форму нужно автоматически отправлять только один раз для одного набора реквизитов.

Я попытался добавить условие в componentWillReceiveProps также, гдеЯ могу определить, если реквизиты разные, отправьте форму.Первоначально, this.props не определено при первом рендере componentWillReceiveProps

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { formSubmitted: false }
  }
  componentWillReceiveProps(nextProps) {
    if (this.props.picmonicVideoData.data.signature !== nextProps.picmonicVideoData.data.signature) {
      this.setState({formSubmitted: false});
  }
  componentDidUpdate = () => {
    if (!this.state.formSubmitted) {
      this.setState({ formSubmitted: true })
      document.getElementById('ltiLaunchForm').submit()
    }
  } 
  render() {
    let renderInputFields = null
    if (this.props.videoData.data.hasOwnProperty("signature")) {
      renderInputFields = Object.keys(launchData).map((key, i) => {
        return (<input type="hidden" name={key} key={i} value={launchData[key]} />)
      })
    }
    return (
      <div>
        <iframe width="100%" height="430px" frameBorder="0" name="videoIframe"></iframe>
        <form name="ltiLaunchForm" id="ltiLaunchForm" method="post" target="target_iframe" encType="application/x-www-form-urlencoded" action={launchUrl}>
          {renderInputFields}
          <input type="hidden" name="oauth_signature" value={signature} />
        </form>
      </div>
    )
  }
}

Любая помощь будет оценена.

Answer 1

Я бы посоветовал использовать componentDidUpdate только потому, что вы можете легко сравнить prevProps и текущий props и выполнить действие отправки.Таким образом, ваш код будет выглядеть примерно так:

componentDidUpdate = (prevProps) => {
    if (this.props !== prevProps) {
      document.getElementById('ltiLaunchForm').submit()
    }
  }

Вам больше не понадобится componentWillReceiveProps, а также избегайте использования устаревших жизненных циклов из React, если вы планируете использовать React 16.3 и выше.Для подробного объяснения взгляните на эту ссылку .