即使在我尝试保存时，使用 React 输入字段也会说合成，并且设置值而不是 defaultValue

Question

当我尝试将更改保存到我的输入字段时遇到问题我收到一条错误消息“警告：出于性能原因重用此合成事件。如果您看到此消息，则表示您正在访问已发布/已取消的nativeEvent属性合成事件。这被设置为空。如果您必须保留原始合成事件，请使用 event.persist()。” 此外，如果我在字段中键入时设置“值”而不是“默认值”，我会得到 [Object, object]。

这是输入组件：

const Profile = ({

  profile,

  mCatalog,

  sCatalog,

  isEditing,

  onChange,

  restoreData,

  userID,

}) => {

const updateProviderNotes = (event) => {

    

    const { name, value } = event.target;

    onChange(name)(value);

  }

return (

          <Input

            type="textarea"

            disbaled={false}

            name="providerNotes"

            value={providerNote}

            onChange={updateProviderNotes}

            />

      )

const Editor = ({ source, onChange, items, oldItems, name }) => {

  return (

    <div className="d-flex ml-3">

      <div className={styles.bubble}>

        <ListEditor

          items={items}

          oldItems={oldItems || []}

          itemListSource={source}

          onChange={onChange(name)}

        />

      </div>

    </div>

  );

};

export default Profile;

这是父组件的一部分

const ProfileData = ({

  profile,

  mCatalog,

  sCatalog,

  page,

  catalog,

  userID,

  setProfile,

}) => {

  const [editingProfile, setEditingProfile] = useState(false);

  const [oldProfile, setOldProfile] = useState(false);

  useEffect(() => {

    setOldProfile(profile)

  }, [])

  const handleMProfileCancel = () => {

    setProfile(oldProfile)

  }

  const handleMedicalProfileSave = () => {

    console.log("profile", profile)

    console.log(typeof profile.medicalProfile.providerNotes)

    api.UserRecords.updateMedicalProfile(userID, profile.medicalProfile)

    setOldProfile(profile)

    

  }

  const updateMedicalProfileDetails = (fieldName) => (value) => {

    

    setProfile({ ...profile, mProfile: {...profile.mProfile, [fieldName]: value }});

  };

任何建议都会有所帮助谢谢！

Answer 1

您基本上会收到此错误，因为您在不允许的异步上下文（更新状态）中使用事件。如果将事件分配给局部变量并引用它，则可以避免此错误。如果我在字段中键入时设置“值”而不是“默认值”，我会得到 [Object, object]您的onChange事件处理程序将收到一个综合事件对象和您传递给它的参数。使用您当前的代码，您将整个事件对象分配为字段值。您updateMedicialProfileDetails作为onChange道具传递的方法不在您的问题中，因此我以该updateProfileDetails方法为例：以下代码应该有效： const updateProfileDetails = (fieldName) => (event) => {    const { value } = event.target;    setProfile({ ...profile, mProfile: {...profile.mProfile, [fieldName]: value }});  };您通过此函数传递的名称参数是不必要的，因为您的事件对象将具有可用的名称属性，因此您的代码可以更新为以下内容：  <Input    type="textarea"    name="providerNotes"    value={profile.providerNotes}    onChange={onChange}    oldValue={restoreData.providerNotes}  />事件处理程序：  const updateProfileDetails = (event) => {    const { name, value } = event.target;    setProfile({ ...profile, mProfile: {...profile.mProfile, [name]: value }});  };