TypeError: nameList.map is not a function by using antd validateFields() and getFieldValue get value null

Question

Everything worked well before i add validateFields()and rule, now i receive an errorTypeError: nameList.map is not a function, also i am trying to use async/awit, i am not sure why it happened, the previous code is working perfectly without validateFields(), on the other hand i use getFieldValue('categoryName')to get input value, it was working fine for few times at the beginning and then the value is null. i could not find any clue after i do the research. please someone help me.

  updateCategory = () => {
    //hide confirm box
    this.formRef.current.formRef.current.validateFields(async (err, values) => {
      if (!err) {
        this.setState({
          showStatus: 0,
        });
        const categoryId = this.category._id;
        const categoryName = this.formRef.current.formRef.current.getFieldValue(
          'categoryName',
        );
        //Reset fields to initialValues
        this.formRef.current.formRef.current.resetFields();
        //request to update category
        const result = await reqUpdateCategory({ categoryId, categoryName });
        if (result.status === 0) {
          //reload display list
          this.getCategorys();
        }
      }
    });
  };

Answer 1

Just happened to come across this, so this is primarily for anyone that comes later, but validateFields does not take a function as a parameter. The signature for validatFields is function (nameList, options). Name list is the list of fields that you want to valdiate.

If you don't provide a parameter, it uses the fields in the form itself. I believe what you want to do here is .validateFields().then(async(err, values)=> { ... } as below:

updateCategory = () => {
    //hide confirm box
    this.formRef.current.formRef.current.validateFields().then(async (err, values) => {
      if (!err) {
        this.setState({
          showStatus: 0,
        });
        const categoryId = this.category._id;
        const categoryName = this.formRef.current.formRef.current.getFieldValue(
          'categoryName',
        );
        //Reset fields to initialValues
        this.formRef.current.formRef.current.resetFields();
        //request to update category
        const result = await reqUpdateCategory({ categoryId, categoryName });
        if (result.status === 0) {
          //reload display list
          this.getCategorys();
        }
      }
    });
  };