即使我尝试保存，使用 react 输入字段也会显示合成，并且设置值而不是 defaultValue 正在呈现 [Object, object]

Question

Disclaimer I am new to developing. I am having trouble when I try and save my changes on my input field I get an error saying "Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property nativeEvent on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist()." Also if I set the "value" instead of the "defaultValue" when I type in the field I get [Object, object].

This is the input component:

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;

this is a portion of the parent component

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 }});
  };
 return (
{page === "medicalProfile" && (
        <InfoEditWrapper
          data={oldProfile.medicalProfile}
          onCancel={handleMedicalProfileCancel}
          onSave={handleMedicalProfileSave}
        >
          <Profile
            profile={profile.medicalProfile}
            medicalCatalog={medicalCatalog}
            surgicalCatalog={surgicalCatalog}
            onChange={updateMedicalProfileDetails}
            userID={userID}
          />
        </InfoEditWrapper>
      )}
)
export default ProfileData;

Any advice would be helpful thanks!

Answer 1

For your warning message, I would refer to this question . You are basically getting this error because you are using your event in an asynchronous context (updating your state) which isn't allowed. You can avoid this error if you assign your event to a local variable and reference it.

if I set the "value" instead of the "defaultValue" when I type in the field I get [Object, object]

Your onChange event handler will receive a Synthetic event object and your parameter you're passing with it. With your current code you assigned the whole event object as the field value.

Your updateMedicialProfileDetails method that you are passing as the onChange prop isn't in your question so I'm using the updateProfileDetails method as an example:

The following code should work:

  const updateProfileDetails = (fieldName) => (event) => {
    const { value } = event.target;
    setProfile({ ...profile, mProfile: {...profile.mProfile, [fieldName]: value }});
  };

Your name parameter you are passing with this function is unnecessary since your event object will have the name attribute available, so your code can be updated to the following:

  <Input
    type="textarea"
    name="providerNotes"
    value={profile.providerNotes}
    onChange={onChange}
    oldValue={restoreData.providerNotes}
  />

The event handler:

  const updateProfileDetails = (event) => {
    const { name, value } = event.target;
    setProfile({ ...profile, mProfile: {...profile.mProfile, [name]: value }});
  };