问题

Question

由于某种原因，在我的handleOnChange函数中e.target.name变为空。有人可以解释为什么会这样吗？这是下面的onChange函数...

const [image, setImage] = useState([]);
const uploadImage = (e) => {
    const files = e.target.files;
    const data = new FormData();
    data.append("file", files[0]);
    data.append("upload_preset", "barberuploads");

    fetch("https://api.cloudinary.com/----", {
      method: "POST",
      body: data,
    })
      .then((res) => res.json())
      .then((response) => {
        // setImage(response.secure_url); // new image URL link to store in database
        setImage({
          ...image,
          [e.target.name]: response.secure_url,
        });
      });
  };

这是我在下面的输入表...

 <input
          type="file"
          name="file"
          placeholder="Image 1"
          onChange={uploadImage}
        ></input>

我收到的错误是“未处理的拒绝（类型错误）无法读取null的属性名称”。另外，它未设置要在我的组件中声明。有人可以帮忙吗？

Answer 1

问题

React使用无效的综合事件并返回到事件池，并且反应状态更新是异步的，因此不会立即进行处理。 Event Pooling

SyntheticEvent已合并。这意味着SyntheticEvent 对象将被重用，并且所有属性将在事件回调已被调用。这是出于性能原因。如这样，您将无法以异步方式访问事件。

解决方案

将事件中的值保存在回调中，并使用这些值代替在状态更新中直接尝试访问事件对象。

const uploadImage = (e) => {
    const { files, name } = e.target; // <-- capture name here
    
    const data = new FormData();
    data.append("file", files[0]);
    data.append("upload_preset", "barberuploads");

    fetch("https://api.cloudinary.com/----", {
      method: "POST",
      body: data,
    })
      .then((res) => res.json())
      .then((response) => {
        setImage({
          ...image,
          [name]: response.secure_url, // <-- use saved name value
        });
      });
  };

Answer 2

原因是React中的事件不是DOM事件，而是特殊事件，对于您而言，我将e.target.name保存在变量中，或者在处理程序的开头调用e.persist()。

您可以找到更多信息here

挂钩未读取e.target.name（反应）

2 个答案:

问题

解决方案