React中Formik表单initialValues赋值语法错误问题排查

核心结论 #

这是语法错误，你的整体架构思路是可行的，问题出在JavaScript对象的赋值语法上。

错误原因 #

在JSX的return区块里，{props?.memberData?.forename}是合法的——因为JSX要求用花括号包裹JavaScript表达式来渲染内容。但在定义initialValues这个普通JavaScript对象时，属性值不需要额外套花括号，你写的forename: {props?.memberData?.forename}相当于在对象里嵌套了一个新的对象（花括号在JS中会被解析为对象字面量），这违反了对象的语法规则，导致出现“预期逗号”的错误。

正确写法 #

去掉属性值外的花括号，直接将表达式赋值给属性：

const initialValues = {
  forename: props?.memberData?.forename,
  // 其他字段同理，例如：
  surname: props?.memberData?.surname,
  email: props?.memberData?.email
};

补充优化 #

如果父组件的memberData可能在组件初始渲染时未加载完成（比如异步请求还没返回），可以给字段设置默认值避免表单出现空值：

const initialValues = {
  forename: props?.memberData?.forename || '',
  surname: props?.memberData?.surname || '',
  email: props?.memberData?.email || ''
};

内容的提问来源于stack exchange，提问作者Jess