Question

当我上传第一张图像时，没有任何内容写入formData，但是当我上传第二张图像时，它上传到“ image”值，然后第三次上传时将写到“ image2”值。好像一切都落后了。如果我忽略这一点，并继续添加信息，最后提交“ image2，image3，image4和image5”值，则不会传递。

任何帮助都很重要。谢谢！

    const [formData, setFormData] = useState({
        year: "",
        make: "",
        model: "",
        price: "",
        image: "",
        image2: "",
        image3: "",
        image4: "",
        image5: "",
        hull: "",
        title: "",
        details: ""
      });

      const {
        year,
        make,
        model,
        price,
        image,
        image2,
        image3,
        image4,
        image5,
        hull,
        title,
        details
      } = formData;

      const types = ["image/png", "image/jpeg"];
      const [file, setFile] = useState("");
      const [fileName, setFileName] = useState("");

    const onChange = e => {
            setFormData({ ...formData, [e.target.name]: e.target.value });
          };

          const onImageChange = async e => {
            e.persist();
            console.log(formData);
            const data = new FormData();
            let file = e.target.files[0];
            console.log(file);
            data.append("file", file);

            try {
              const res = await axios.post("/api/upload", data, {
                headers: {
                  "Content-Type": "multipart/form-data"
                }
              });

              const { fileName, filePath } = res.data;
              console.log(e.target.name);
              console.log(filePath);
              setFormData({ ...formData, [e.target.name]: res.data.filePath});


            } catch (err) {
              console.log("fileUpload Err");
              console.log(err);
            }
          };

          return (
            <div className="posts_area">
              <form
                className="post_form"
                onSubmit={e => {
                  e.preventDefault();
                  addPost({
                    year,
                    make,
                    model,
                    price,
                    image,
                    image2,
                    image3,
                    image4,
                    image5,
                    hull,
                    title,
                    details
                  });
                }}
              >
                <h5 className="create-post-title">Boat Year:</h5>
                <input
                  name="year"
                  value={year}
                  onChange={e => onChange(e)}
                  placeholder="Year"
                  className="create_post_fields"
                  required
                />
                <br />
                <br />

                <h5 className="create-post-title">Make:</h5>
                <input
                  name="make"
                  value={make}
                  onChange={e => onChange(e)}
                  placeholder="Make"
                  className="create_post_fields"
                  required
                />
                <br />
                <br />

                <h5 className="create-post-title">Model:</h5>
                <input
                  name="model"
                  value={model}
                  onChange={e => onChange(e)}
                  placeholder="Model"
                  className="create_post_fields"
                  required
                />
                <br />
                <br />

                <h5 className="create-post-title">Price:</h5>
                <input
                  name="price"
                  value={price}
                  onChange={e => onChange(e)}
                  placeholder="Price"
                  className="create_post_fields"
                  required
                />
                <br />
                <br />

                <h5 className="create-post-title">Hull Type:</h5>
                <input
                  name="hull"
                  value={hull}
                  onChange={e => onChange(e)}
                  placeholder="Hull Type"
                  className="create_post_fields"
                  required
                />
                <br />
                <br />

                <h5 className="create-post-title">Add a title to your post:</h5>
                <input
                  name="title"
                  value={title}
                  onChange={e => onChange(e)}
                  placeholder="Title"
                  className="create_post_fields"
                  required
                />
                <br />
                <br />

                <h5 className="create-post-title">Other Details:</h5>
                <textarea
                  placeholder="Ex. Has freshwater tank"
                  name="details"
                  onChange={e => onChange(e)}
                  className="create_post_fields"
                ></textarea>
                <br />
                <br />

                <h5 className="create-post-title">Upload Main Image</h5>
                <input type="file" name="image" onChange={ev => onImageChange(ev)} />
                <br />
                <br />

                <h5 className="create-post-title">Upload Secondary Images</h5>
                <input type="file" name="image2" onChange={ev => onImageChange(ev)} />
                <br />
                <br />

                <input type="file" name="image3" onChange={ev => onImageChange(ev)} />
                <br />
                <br />

                <input type="file" name="image4" onChange={ev => onImageChange(ev)} />
                <br />
                <br />

                <input type="file" name="image5" onChange={ev => onImageChange(ev)} />
                <br />
                <br />


                <input type="submit" value="Submit" className="submit_button" />
              </form>
            </div>
          );
        };

Answer 1

改为尝试setFormData(prev => ({ ...prev, [e.target.name]: e.target.value }));。

Answer 2

结果证明它正在更新formData，但是console.log没有足够快地更新？我在每个onImageChange的顶部运行了一个console.log，您可以看到它每次以这种方式运行后都会更新。超级奇怪

状态未设置，以及何时设置不正确

2 个答案: