Муравьиная форма Форма набора значений реквизит формы - PullRequest
Новая
       50

Муравьиная форма Форма набора значений реквизит формы

0 голосов
/ 10 декабря 2018

Я использую antd дизайн в моей форме.

Здесь я устанавливаю значение из редуктора profilereducer с помощью метода shouldComponentUpdate.

class ProfileForm extends Component {

 componentDidMount = () => {
  this.props.actions.getprofile()
 }

 shouldComponentUpdate = (nextProps) => {
  if (this.props.profile) {
   this.props.form.setFieldsValue({
    name: this.props.profile.name,
   });
  } else {
   this.props.form.setFieldsValue({
    firstname: 'loading',
   });
  }
 }


 render() {
  const { getFieldDecorator, getFieldValue } = this.props.form; 
     <Form layout="vertical">
        <FormItem label="First Name" >
            {getFieldDecorator('name', { rules: [{ required: true, message: 'Required!', }], })(
                <Input addonBefore={selectBefore} placeholder="First Name" />
            )}
        </FormItem>
    </Form>    
}


 function mapStateToProps(state) {
  return {
   profile: state.profilereducer.profile,
  }
 }

 function mapDispatchToProps(dispatch) {
  return {
   actions: bindActionCreators(actions, dispatch)
  }
 }

 const Profile = Form.create()(ProfileForm);

 export default connect(mapStateToProps, mapDispatchToProps)(Profile);
}

Ошибка:

enter image description here

Ответы [ 2 ]

0 голосов
/ 10 декабря 2018

Вы устанавливаете состояние в цикле, следовательно, вы получили ошибку.Вот лучший подход к решению этой проблемы ... Я просто оставил selectBefore как переменную (в вашем коде я не нашел его установки) .. Измените его на строку, если вы получите ошибку .. 

componentDidMount = () => {
   this.props.actions.getprofile()
  }

  renderBasicform(initialVal) {
    const { getFieldDecorator, getFieldValue } = this.props.form;
    return (
      <Form layout="vertical">
        <FormItem label="First Name" >
          {getFieldDecorator('name', { initialValue: initialVal,rules: [{ required: true, message: 'Required!', }], })(
            <Input addonBefore={selectBefore} placeholder="First Name" />
          )}
        </FormItem>
      </Form>
    );
  }

  render() {
    if(!this.props.profile) {
        return (
          <div>
          {this.renderBasicform("Loading")}
          </div>
        );
    }

        return (
          <div>
            {this.renderBasicform(this.props.profile.name)}
            </div>
        );
  }
0 голосов
/ 10 декабря 2018

Как следует из названия функции, shouldComponentUpdate должен возвращать логическое значение.Либо он должен возвращать true, если вызывается render() (что обычно является значением по умолчанию), либо false, если нет.Он в основном предназначен как функция оптимизации, где разработчик может пропустить повторную визуализацию компонента при определенных обстоятельствах.См. Документацию по реагированию, например, для функции: https://reactjs.org/docs/react-component.html#shouldcomponentupdate

Во-вторых, я уверен, что вы даже хотите сделать переназначение между profile и form.Как правило, считается, что шаблон не может изменять или изменять свойства непосредственно внутри классов компонентов, как это.Есть ли конкретная причина, по которой вы пытаетесь переназначить данные profile в свойство form?Не проще ли сконструировать это отображение функции рендеринга и передать его туда <Form>?Или, что еще лучше, попросите редуктор отобразить эти данные так, как вы хотели бы, чтобы они были с самого начала, без необходимости иметь свойства с похожими данными, но с другой структурой.

...