即使在我尝试保存时，使用 React 输入字段也会说合成，并且设置值而不是 defaultValue 正在渲染 [Object, object]

Question

免责声明我是开发新手。当我尝试保存对输入字段的更改时遇到问题我收到一条错误消息 “警告：出于性能原因，此合成事件被重用。如果您看到此消息，则表示您正在访问 released/nullified 合成事件上的属性 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 }});
  };
 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;

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

Answer 1

关于您的警告信息，我会参考这个question。您基本上会收到此错误，因为您在不允许的异步上下文（更新状态）中使用事件。如果将事件分配给局部变量并引用它，则可以避免此错误。

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

您的 onChange 事件处理程序将接收一个合成事件对象和您传递给它的参数。使用您当前的代码，您将整个事件对象指定为字段值。

您作为 onChange 道具传递的 updateMedicialProfileDetails 方法不在您的问题中，因此我使用 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 }});
  };

即使在我尝试保存时，使用 React 输入字段也会说合成，并且设置值而不是 defaultValue 正在渲染 [Object, object]

Working with react input field says synthetic even when i try and save, and setting value instead of defaultValue is rendering [Object, object]

javascript

reactjs

reactstrap