在react中引用antd表单组件后导致useState钩子函数的数据已更新，但是UI视图却未更新的原因与解决方法。

问题描述：

这是我们用useState定义的数据，并且在onChange事件触发时会更新定义的数据，以达到双向绑定的目的，到这里都没有问题。

const [brand, setBrand] = useState("")
const [goodsName, setgoodsName] = useState("")
const [model, setmodel] = useState("")

const brandChange = event => {
    setBrand(event.target.value);
    console.log(event);
  };
  const goodsNameChange = event => {
    setgoodsName(event.target.value);
  };
  const modelChange = event => {
    setmodel(event.target.value);
  };

<MyFormItemGroup prefix={['goods']}>
        <MyFormItem name="商品品牌" label="品牌:" >
          <Input placeholder="商品品牌"  value={brand} onChange={brandChange} autoComplete="off" />
        </MyFormItem>
        <MyFormItem name="商品名称" label="名称:">
          <Input placeholder="商品名称" value={goodsName} onChange={goodsNameChange} autoComplete="off" />
        </MyFormItem>
        <MyFormItem name="商品型号" label="型号:">
          <Input placeholder="商品型号" value={model} onChange={modelChange} autoComplete="off" />
        </MyFormItem>
</MyFormItemGroup>

问题就在于当我们想要重置输入栏的内容时，如以下代码。就会出现内部数据已更新，然而UI界面上的输入栏内容任然保留。

  // 定义重置按钮方法
  function reset(){
    setBrand("");
    setgoodsName("");
    setmodel("");
}

好了，现在问题已经发生了，直接说解决方案：

直接删除，name="xxxx"即可。就是这么简单。

现在再来说说原因：

由于 name 属性对组件内部状态处理逻辑（如使用 useContext 或 useReducer 等方法的方式）进行了影响导致的。

来看看antd是如何定义的：

const MyFormItem = ({ name, ...props }) => {
  const prefixPath = React.useContext(MyFormItemContext);
  const concatName = name !== undefined ? [...prefixPath, ...toArr(name)] : undefined;
  console.log(concatName);
  return <Form.Item name={concatName} {...props} />;
};

MyFormItem组件的代码中，通过useContext获取到了上下文中的前缀路径prefixPath，将其与传入的name属性拼接成完整的表单项名称concatName。在外层调用MyFormItem组件时，需要确保传入的name属性是正确且完整的，否则就导致无法更新UI展示。

当然最简单的方法就是直接将name属性删除就好啦，name 属性是用于提示输入方面的信息，通常会被经过处理后传递给后端服务端数据解析时作为标记，name 属性其实就是帮助用户识别表单项，并提供相应的输入提示。但是name 属性一般对开发人员更直接可见，用于传递标识符等信息，所以直接删掉几乎没有任何影响。