Форма Ant Design задает значения формы реквизита

Я использую 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);
}

Ошибка:

введите описание изображения здесь


reactjs redux state react-props antd
person Selvin    schedule 10.12.2018    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Вы устанавливаете состояние в цикле, поэтому вы получили ошибку. Вот лучший подход к этому. Я просто оставил 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>
        );
  }
person Hemanthvrm    schedule 10.12.2018

arrow_upward
0
arrow_downward

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

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

person hakeri    schedule 10.12.2018