未处理的拒绝（TypeError）：setX 不是 function

Question

我是 React 的新手，有些事情我仍在努力理解，例如我在连接到 cloudinary（上传图像）的图像管理应用程序上面临的问题：

我有以下代码：

App.js（父级）

import React, { useState } from 'react';
import './App.css';
import Gallery from './Gallery';
import TopBar from './TopBar';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';


function App() {

  return (

    <div className="all">

      <TopBar/>

        <div className="gallery-enclosure">
          <Gallery/>
        </div>


    </div>

  );
}

export default App;

TopBar.js （包含上传按钮的组件以及处理上传的 function

import React, { useState } from 'react';
import './App.css';
import Gallery from './Gallery'
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

function TopBar() {


    const {image, setImage} = useState('')
    const {loading, setLoading} = useState(false)

    const uploadImage = async e => {
      const files = e.target.files
      const data = new FormData()
      data.append('file', files[0])
      data.append('upload_preset', 'projeto_react')
      setLoading(true)
      const res = await fetch(
        'https://api.cloudinary.com/v1_1/antoniolima/image/upload',
        {
          method: 'POST',
          body: data
        }
      )
      const file = await res.json()

      setImage(file.secure_url)
      setLoading(false)
    }

    return (

        <div className="TopBar">     
        <div>
          <h2 id="title">
            Image Management
          </h2>
        </div>

        <div></div>

        <div className="App">
          <h1></h1>
          <input type="file"
                  name="file"
                  accept="image/*"
                  id="contained-button-file"
                  multiple
                  style={{display: "none"}}
                  placeholder="Upload an image"
                  onChange={uploadImage}
          />
          <label htmlFor="contained-button-file">
                <Button variant="contained" color="primary" component="span">
                    Upload Image
                </Button>
          </label>
          {loading ? (
            <h3>Loading...</h3>

          ) : (
            <img src={image} style={{width: '300px'}} />
          )}
        </div>
      </div>



    );
  }

  export default TopBar;

我很难理解的问题是，当我尝试上传文件时，它给了我以下错误：' Unhandled Rejection (TypeError): setLoading is not a function '

但是同样的 function 在我将代码分成不同的组件以便更有条理的工作之前工作（并且为了在我的应用程序 ZA2F2ED4F8EBC2CBB4C21A29DC40AB661DZ 中创建一个 state 和道具并使用 I'mtDZ 将它们定义为）。

我一直在阅读箭头函数并将 const 插入箭头 function 的 props 参数中，但我不明白如何定义它，最重要的是在我的TopBar.js中访问setLoading()的等价物，

提前致谢

Answer 1

您正在使用 object 进行解构。 相反，您应该使用数组解构：

const [image, setImage] = useState('')
const [loading, setLoading] = useState(false)

useState返回数组，其中第一个索引具有 state 值，第二个索引具有 function 以设置 state。