参考react-dropzone实现组件时触发Invalid hook call错误求助

错误信息 #

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

官方提示的可能原因：

• React与渲染器（如React DOM）版本不匹配
• 违反了Hooks的使用规则
• 应用中存在多个React副本

问题根源分析 #

从你提供的代码来看，最直接的触发原因是文件内容与文件名完全混淆：

1. 你将包含useState Hook的UploadProductPage组件代码写到了FileUpload.js文件中
2. 同时将依赖react-dropzone（内部使用Hook）的FileUpload组件代码写到了UploadProductPage.js文件中
3. 这种混乱导致组件导入逻辑出错，甚至触发循环导入，使得Hook在组件未正确初始化的阶段被调用，违反了Hook的使用规则。

此外还有两个次要问题：

• UploadProductPage组件中使用了原生<h2 level={2}>，但level是Ant Design Typography.Title组件的专属属性，原生h2不支持该属性
• Images状态的初始值设为1不合理，应该设为空数组[]（用于存储上传的文件列表）

解决方案 #

1. 修正文件内容与文件名的对应关系 #

将两个文件的内容互换，确保组件代码与文件名一致：

修正后的FileUpload.js

import React from 'react'
import Dropzone from 'react-dropzone'

function FileUpload() {
  return (
    <div style={{ display: 'flex', justifyContent:'space-between'}}>
      <Dropzone onDrop={acceptedFiles => console.log(acceptedFiles)}>
        {({getRootProps, getInputProps})=>(
            <div style={{
                width: 300, height:240, border:'1px solid lightgray',
                display:'flex', alignItems:'center', justifyContent:'center'}}
                {...getRootProps()}>
                <input {...getInputProps()}/>
                  <p>Drag 'n' drop some files here, or click to select files</p>
            </div>
        )}
      </Dropzone>
    </div>
  )
}

export default FileUpload

修正后的UploadProductPage.js

import React, { useState } from 'react'
import {Typography, Button, Form, Input} from 'antd';
import FileUpload from '../../utils/FileUpload';

const {TextArea} = Input;
 
const Continents = [
  {key:1, value:"Africa"},
  {key:2, value:"Europe"},
  {key:3, value:"Asia"},
  {key:4, value:"North America"},
  {key:5, value:"South America"},
  {key:6, value:"Australia"},
  {key:7, value:"Antactica"},
]

function UploadProductPage() {
  
  const [Title, setTitle] = useState("")
  const [Description, setDescription] = useState("")
  const [Price, setPrice] = useState(0)
  const [Continent, setContinent] = useState(1)
  const [Images, setImages] = useState([])

  const titleChangeHandler = (event) => {
      setTitle(event.currentTarget.value)
  }
  
  const descriptionChangeHandler = (event) => {
      setDescription(event.currentTarget.value)
  }

  const priceChangeHandler = (event) => {
      setPrice(event.currentTarget.value)
  }

  const continentChangeHandler =(event) => {
    setContinent(event.currentTarget.value)
    console.log(event.currentTarget.value)
  }


return (
    <div style ={{maxWidth:'700px',margin:'2em auto'}}>
        <div style={{textAlign:'center',marginBottom:'2em'}}>
            <Typography.Title level={2}>product upload</Typography.Title>
        </div>
        
        <FileUpload/>

        <Form>
          <br/>
          <br/>
          <label>name</label>
          <Input onChange ={titleChangeHandler} value={Title}/>
          <br/>
          <br/>
          <label>description</label>
          <TextArea onChange={descriptionChangeHandler} value={Description}/>
          <br/>
          <br/>
          <label>price($)</label>
          <Input onChange={priceChangeHandler} value={Price}/>
          <br/>
          <br/>
          <select onChange={continentChangeHandler} value={Continent}>
              {Continents.map(item => (
                  <option key={item.key} value={item.key}>{item.value}</option>
              ))}
          </select>
          <br/>
          <br/>
          <Button type="primary">
            OK
          </Button>
        
        </Form>
    </div>
  )
}

export default UploadProductPage

2. 验证React版本兼容性 #

确保你的React和React DOM版本都在16.8及以上（Hook的最低支持版本）：

• 查看当前版本：执行npm list react react-dom
• 更新版本：执行npm install react@latest react-dom@latest

3. 排查多React副本问题 #

如果上述步骤仍未解决问题，检查是否存在多React副本：

• 执行npm ls react查看依赖树，确认是否有多个版本的React被安装
• 如果存在，删除node_modules和package-lock.json，重新执行npm install

内容的提问来源于stack exchange，提问作者Jayden