Question

我有Redux形式Field，其中指定了验证功能。在该验证函数中，我想引用React组件中的props。像这样：

interface Props {
  // this is passed from the parent component which is linked to the state.payout.balance in redux store
  balance: number
}

class ScreenView extends React.PureComponent<
  InjectedFormProps<{}, Props> & Props
> {
  public render() {
    ...
    <Field
      name="payoutInput"
      type="text"
      component={this.renderFunc}
      validate={this.validateFunc}
    />
  }
  public validateFunc = (value: string, props: any) => {
    // I want to reference to the component's props
    // props seems to be the Form props
    // this.props doesn't have the latest values
    // because I linked the initial value to the balance in the store
    // so I can see the input is updated once the GET request finishes
    // but when the validation is triggered, the balance is 0 which is the default value
    // modify the input field will trigger validation with the latest balance in the props
  }
}

const ScreenView = reduxForm<{}, Props>({
  form: 'PayoutForm',
  enableReinitialize: true,
})(ScreenView)

export default connect((state: ReduxState) => {
  return {
    // this initialValues is used to set the default input value after a get request finish
    initialValues: {
      payoutInput: String(state.payout.balance),
    },
  }
})(ScreenView)

重新初始化初始值后如何获得最新的道具？

更新在对Reactotron进行更深入的研究之后，我注意到事件按以下顺序发生：

form/INITIALIZE
form/REGISTER_FIELD
validateFunc(value == undefined, this.props.balance == 0)
validateFunc(value == 0, this.props.balance == 0)
API RESPONSE ==> this fetches the balance
form/INITIALIZE
validateFunc(value == newBalance, this.props.balance == 0)
form/UPDATE_SYNC_ERRORS ==> this is weird, the doc says returning undefined means the value is valid and in my logic, when value == newBalance, this.props.balance == 0, it returns undefined
MyOwnCustomAction which is used to change the balance in redux store

这种解释说明了为什么我没有得到最新的余额，但没有解释为什么价值参数可以得到最新的余额。在下面的代码中，如果value参数是最新余额，则redux存储中的余额应该相同，对吧？

initialValues: {
  payoutInput: String(state.payout.balance),
},

Redux表单字段级别验证没有包含组件中的最新支持

0 个答案: