Shopify Checkout UI Extension文本框值更新失败，报ExtensionInteractionError

报错信息：
ExtensionInteractionError: Error in ForwardRef() component event handler: TypeError: Cannot read properties of undefined (reading 'value')

问题原因 #

Shopify Checkout UI Extensions提供的TextField组件，其onChange回调的参数不是标准的React合成事件对象，它直接传递输入框的当前值，而非带target属性的事件对象。你代码里尝试访问e.target.value，自然会触发“无法读取undefined的value属性”错误。

修正代码 #

直接接收输入值作为回调参数即可，有两种写法：

写法一：单独处理函数

import React, { useState } from 'react';
import {
  useExtensionApi,
  render,
  TextField,
} from '@shopify/checkout-ui-extensions-react';

render('Checkout::Dynamic::Render', () => <App />);

function App() {
  const { extensionPoint } = useExtensionApi();
  const [vatNumber, setVatNumber] = useState('');

  const handleVatNumberChange = (value) => {
    setVatNumber(value)
  }

  return (
    <>
      <TextField
        label="VAT Number (Optional)"
        name="vat_number"
        value={vatNumber}
        onChange={handleVatNumberChange}
      />
    </>
  );
}

写法二：简化inline回调

import React, { useState } from 'react';
import {
  useExtensionApi,
  render,
  TextField,
} from '@shopify/checkout-ui-extensions-react';

render('Checkout::Dynamic::Render', () => <App />);

function App() {
  const { extensionPoint } = useExtensionApi();
  const [vatNumber, setVatNumber] = useState('');

  return (
    <>
      <TextField
        label="VAT Number (Optional)"
        name="vat_number"
        value={vatNumber}
        onChange={(value) => setVatNumber(value)}
      />
    </>
  );
}

补充说明 #

Shopify的Checkout UI扩展组件库和常规React组件的事件回调逻辑不同，所有表单组件的onChange都是直接返回当前值，而非事件对象，开发时需要注意这个差异。

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