Payload CMS自定义Field组件无法获取编辑模式Item值的问题

1. 获取当前字段的单个值 #

Payload的自定义Field组件会直接通过props传递当前字段的value和更新方法onChange，你之前的console输出没显示可能是初始值为空，或者没解构出来。直接使用即可：

'use client';

import React from 'react';

export const ImageEdit: React.FC<any> = ({ value, onChange, field }) => {
  // value 就是当前imageUrl字段的内容
  console.log('当前图片URL:', value);
  
  return (
    <div style={{ display: 'flex', gap: '16px', alignItems: 'flex-start' }}>
      {/* 输入框用于修改URL */}
      <input
        type="text"
        value={value || ''}
        onChange={(e) => onChange(e.target.value)}
        placeholder="输入图片URL"
        style={{ flex: 1, padding: '8px' }}
      />
      {/* 预览图片 */}
      {value && (
        <img
          src={value}
          alt={field.label}
          style={{ maxWidth: '150px', maxHeight: '150px', objectFit: 'contain' }}
        />
      )}
    </div>
  );
};

2. 获取整个Item的完整数据 #

如果需要当前编辑项的其他字段数据，可以通过Formik的useFormikContext钩子获取（Payload内部用Formik管理表单状态）：

'use client';

import React from 'react';
import { useFormikContext } from 'formik';

export const ImageEdit: React.FC<any> = ({ value, onChange }) => {
  // 获取整个表单的values，即当前编辑的完整Item数据
  const { values } = useFormikContext();
  
  console.log('完整Item数据:', values);
  console.log('当前图片URL:', value);
  
  return (
    <div style={{ display: 'flex', gap: '16px', alignItems: 'flex-start' }}>
      <input
        type="text"
        value={value || ''}
        onChange={(e) => onChange(e.target.value)}
        placeholder="输入图片URL"
        style={{ flex: 1, padding: '8px' }}
      />
      {value && (
        <img
          src={value}
          alt="预览图"
          style={{ maxWidth: '150px', maxHeight: '150px', objectFit: 'contain' }}
        />
      )}
    </div>
  );
};

为什么Cell组件能直接拿到值？ #

Cell组件是列表视图中展示字段的组件，Payload会直接把字段的当前值作为props传递给它；而Field组件是表单编辑组件，遵循Formik的数据流，单个字段值通过value props传递，完整Item数据需要通过Formik上下文获取。

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