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

当我上传第一张图像时,没有任何内容写入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,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>
          );
        };

wszh453978896 回答:状态未设置,以及何时设置不正确

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

,

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

本文链接:https://www.f2er.com/3115137.html

大家都在问