React Usestate 不上传变量

Question

我正在尝试为我的网站创建上传系统，但遇到了问题。当我尝试使用反应状态加载我的文件信息时，我的变量图像不会更新。

const [titolo, setTitolo] = useState("")
const [image, setImage] = useState([])
const [descrizione, setDescrizione] = useState("")
const [prezzo, setPrezzo] = useState("")
const [quantita, setQuantita] = useState(0)

const fileSelectedHandler = event  => {
  console.log(event.target.files[0])
  setImage(event.target.files[0])
  console.log(image)
}

因此，当我在控制台记录 event.target.files[0] 时，它在我看来是这样的： Reults of console.log(event.target.files[0])

但是当我打印我的图像变量时，它看起来像这样： Result of console.log(image)

所以当我使用 axios 传递我的文件信息时，我没有任何信息。你能帮帮我吗？

Answer 1

由于 JavaScript 的异步特性，您不能期望 image 在 setImage(...) 函数调用之后立即被控制台记录。您应该添加一个useEffect 挂钩，如下所示。

  React.useEffect(() => {
    console.log(image)
  }, [image]);