如何在点击时填充初始数据

Question

我正在处理 Apollo graphql 以从 UI 获取数据，这里我从后端获取数据并上传图像，然后有一个按钮（编辑），单击该按钮我使字段可编辑，以便用户可以上传新图片。

问题

在编辑点击我有两个按钮编辑和取消

问题是当我点击取消时，它没有拍摄初始图像。

我正在做的是

const [file, setfile] = useState('');
const [filename, setfilename] = useState('Chose file');
const [canCeldata, setcanCeldata] = useState(null);
const [disabled, setdisabled] = useState(true);
const [edit, setedit] = useState(false);
const [formData, setFormdata] = useState(false);

const { loading, error, data } = useQuery(Get_img);

useEffect(() => {
    if (data) {
        setFormdata(data.getImage);
        setcanCeldata(data.getImage);
    }
}, [data]);
if (loading) return <div>Loadinf</div>;
if (error) return <div>Error</div>;

const onChange = (e) => {
    //  setfile(e.target.files[0]);
    //  setfilename(e.target.files[0].name);
    let file = e.target.files;

    let reader = new FileReader();
    reader.readAsDataURL(file[0]);

    reader.onload = (e) => {
        //  console.log(e.target.result);
        formData.img_url = URL.createObjectURL(file[0]);

        setfile(e.target.result);
    };
};

const Edit = () => {
    setdisabled(false);
    setedit(true);
};
const cancel = () => {
    console.log(data);
    setFormdata(canCeldata);
    setdisabled(true);
    setedit(false);
};


         <form>
            {edit === false && (
                <button className="btn btn-primary" type="button" onClick={Edit}>
                    Edit
                </button>
            )}
            {edit === true && (
                <div>
                    <button className="btn btn-primary" type="button">
                        Save
                    </button>
                    <button className="btn btn-primary" type="button" onClick={cancel}>
                        Cancel
                    </button>
                </div>
            )}
            <br />
            <div className="custom-file">
                <input
                    disabled={disabled}
                    type="file"
                    accept="image/png, image/jpeg"
                    className="custom-file-input"
                    id="customFile"
                    onChange={onChange}
                />
                <label className="custom-file-label" htmlFor="customFile">
                    {filename}
                </label>
                <br />
                <br />

                <button
                    disabled={disabled}
                    type="button"
                    className="btn btn-secondary btn-block"
                    onClick={save_img}>
                    Submit
                </button>
            </div>
        </form>
        <img src={formData.img_url} className="test_img" />
    </div>

在取消点击时显示问题，因为 url 正在更改，我正在使用 URL.createObjectURL

这个正在改变网址

为了便于理解，我提供了我的静态数据。

   let data = {
       "id": "1",
       "img_url": 
   "https://storage.blob.core.windows.net/testimageupload/test.png"
     }

工作代码

Code sandbox link

Answer 1

您正在直接改变 formData ，这不是钩子中的正确方法。您应该使用 set 函数来更改您定义的任何状态。以下是工作代码，我也提到了更改

/** @format */

import React, { useState, useEffect } from "react";

function Device_register() {
  const [file, setfile] = useState("");
  const [filename, setfilename] = useState("Chose file");
  const [canCeldata, setcanCeldata] = useState(null);
  const [disabled, setdisabled] = useState(true);
  const [edit, setedit] = useState(false);
  const [formData, setFormdata] = useState(false);

  let data = {
    id: "1",
    img_url: "https://picsum.photos/200/300"
  };

  useEffect(() => {
    if (data) {
      setFormdata(data);
      setcanCeldata(data);
    }
  }, []);

  console.log(JSON.stringify(data));

  const onChange = e => {
    let file = e.target.files;

    let reader = new FileReader();
    reader.readAsDataURL(file[0]);

    reader.onload = e => {
      //    console.log(e.target.result);

     // CHANGES DONE HERE
      let newForm = Object.assign({},formData);
      newForm.img_url = URL.createObjectURL(file[0]);
      setFormdata(newForm);
      //formData.img_url = URL.createObjectURL(file[0]);
      // CHANGES END
      setfile(e.target.result);
    };
  };
  const save_img = () => {
    alert("j");
  };

  const Edit = () => {
    setdisabled(false);
    setedit(true);
  };
  const cancel = () => {
    console.log(data);
    setFormdata(canCeldata);
    setdisabled(true);
    setedit(false);
  };
  return (
    <div className="container">
      <form>
        {edit === false && (
          <button className="btn btn-primary" type="button" onClick={Edit}>
            Edit
          </button>
        )}
        {edit === true && (
          <div>
            <button className="btn btn-primary" type="button">
              Save
            </button>
            <button className="btn btn-primary" type="button" onClick={cancel}>
              Cancel
            </button>
          </div>
        )}
        <br />

        <div className="custom-file">
          <input
            disabled={disabled}
            type="file"
            accept="image/png, image/jpeg"
            className="custom-file-input"
            id="customFile"
            onChange={onChange}
          />
          <label className="custom-file-label" htmlFor="customFile">
            {filename}
          </label>
          <br />
          <br />

          <button
            disabled={disabled}
            type="button"
            className="btn btn-secondary btn-block"
            onClick={save_img}
          >
            Submit
          </button>
        </div>
      </form>
      <img src={formData.img_url} className="test_img" />
    </div>
  );
}

export default Device_register;

Answer 2

我认为您的问题是当用户首次编辑表单时您没有保存cancelData。尝试将您的 Edit 处理程序设置为 -

const Edit = () => {
    // Add this line: save the form data in it's original
    // state when the user enters Edit mode.
    setcanCeldata({ ...formData });

    setdisabled(false);
    setedit(true);
};