web-dev-qa-db-ja.com

Antデザインフォームセット値フォーム小道具

フォームで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

reactjsreduxstateantdreact-props
6
Selvin

ループ内で状態を設定しているため、エラーが発生しました。これを扱うためのより良いアプローチがあります。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>
        );
  }
4
Hemanthvrm

関数名が示すように、shouldComponentUpdateはブール値を返す必要があります。 render()を呼び出す必要がある場合（通常はデフォルト）、trueを返すか、そうでない場合はfalseを返します。開発者が特定の状況でコンポーネントの再レンダリングをスキップできる最適化機能として主に意図されています。関数の例については、reactのドキュメントを参照してください： https://reactjs.org/docs/react-component.html#shouldcomponentupdate

第二に、profileとformの間のリマッピングを行う理由さえあることに気付きました。一般に、このようなコンポーネントクラス内でプロパティを直接変更または変更することは、アンチパターンと見なされます。 profileデータをformプロパティに再マップしようとする特別な理由はありますか？レンダリング関数のマッピングを構築し、<Form>に渡すのは簡単ではないでしょうか？または、さらに良いことに、類似のデータで構造が異なるプロパティを使用せずに、最初から必要に応じてリデューサーにこのデータをマップしてもらいます。

0
hakeri