React Context API中ProductState的ESLint错误及变量未定义问题求助

我用React的Context API实现了ProductState，但运行时触发ESLint错误：

• src\context\product\ProductState.js第34行：'name'全局变量禁用问题
• 第35-37行：description、price、category未定义

后端路由已经通过Postman测试正常，相关代码如下，求解决。

ESLint错误信息 #

ERROR in [eslint]
src\context\product\ProductState.js
Line 34:13:  Unexpected use of 'name'      no-restricted-globals
Line 35:20:  'description' is not defined  no-undef
Line 36:14:  'price' is not defined        no-undef
Line 37:16:  'category' is not defined     no-undef

相关代码 #

productContext.js

import { createContext } from "react";
const ProductContext= createContext();

export default ProductContext;

ProductState.js（原错误代码）

import React, { useState } from "react";
import ProductContext from "./ProductContext";

const ProductState = (props) => {
    const host = "http://localhost:5000"
    const productInitial = []

    const [product, setProduct] = useState(productInitial);
    //Add Note
    const addProduct=async(name,description,price,category,image)=>{
        //TODO API CALL
        let url = `${host}/api/Imageprac/upload`
        //Api Call
        const response = await fetch(url, {
            method: 'POST', // *GET, POST, PUT, DELETE, etc.

            headers: {
                'Content-Type': 'application/json',
                'auth-token': "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiNjJlZThmMGI4NmU1YzQ5NDZkM2I3NWQ1In0sImlhdCI6MTY1OTgwMTM1NX0.NdR38S1oby9mSzl1zTH-LYYavsJGjwq6OWsPP_q3YvI"
            },

            body: JSON.stringify({name,description,price,category,image}) // body data type must match "Content-Type" header
        });
        const json= response.json(); // parses JSON response into native JavaScript objects

    }
//logic to add a note
console.log("adding a new note");

const newImage={
    "_id": "63304097cc95e936a974bd6e",
    "user": "62ee8f0b86e5c4946d3b75d5",
    "name": name,
    "description": description,
    "price": price,
    "category":category,
    "image":Object,
    "date": "2022-08-25T10:26:57.324Z",
    "__v": 0    

}
setProduct(product.concat(newImage));


  return (
<ProductContext.Provider  value={{ product,addProduct}}>
{props.children}
</ProductContext.Provider>
  )
}

export default ProductState;

App.js

import './App.css';
import Home from './components/Home';
import Navbar from './components/Navbar';
import {
  BrowserRouter as Router,
  Route,
  Routes,
  
} from "react-router-dom";
import About from './components/About';
import Login from './components/Login';
import Signup from './components/Signup';
import AdminForm from './components/AdminForm';
import Loginagain from './components/Loginagain';
import Signupagain from './components/Signupagain';
import ProductState from './context/product/ProductState';

function App() {
  return (
    <>
    <ProductState>
    <Router>
    <Navbar/>
    <Routes>
    <Route path='/' element={<Home/>}/>
    <Route path='/about' element={<About/>}/>
    <Route path='/login' element={<Loginagain/>}/>
    <Route path='/signup' element={<Signupagain/>}/>
    <Route path='/adminpanel' element={<AdminForm/>}/>
    </Routes>
    </Router>
    </ProductState>
    </>
  );
}

export default App;

Node.js后端路由

const express = require('express');
const { body, validationResult } = require('express-validator');
const router = express.Router();
const multer=require('multer');
const fetchuser = require('../middleware/fethuser');
const imageModel=require('../models/imageModel');
const app = express()

//storage

const storage = multer.diskStorage({
    destination: 'uploads',
    filename: function (req, file, cb) {
       cb(null,file.originalname)
    }
  })

  const upload = multer({ storage: storage }).single('testImage');

  router.post('/upload',fetchuser,async(req,res)=>{
     upload(req,res,(err)=>{
        if(err){
            console.log(err);
        }
        else{
            const newImage= new imageModel({
                
                name:req.body.name,
                description:req.body.description,
                price:req.body.price,
                category:req.body.category,
                user: req.user.id,
                image:{
                    data:req.file.filename,
                    contentType:'image/png '
                }
                

            })
            newImage.save()
            .then(()=>res.send("succesfully uploaded")).catch((err)=>console.log(err))
        }
     })
  });

  module.exports=router;

错误原因分析 #

1. 变量作用域问题：name、description等变量是addProduct函数的参数，仅在函数内部有效，但你在函数外部的newImage对象中引用了这些变量，导致ESLint报未定义错误。
2. 全局变量误判：函数外部的name找不到局部定义，被ESLint识别为全局变量，触发no-restricted-globals规则。
3. 逻辑顺序错误：原代码中console.log、newImage和setProduct会在组件初始化时直接执行，而非调用addProduct时执行，不符合添加产品的业务逻辑。

修正后的ProductState.js代码 #

import React, { useState } from "react";
import ProductContext from "./ProductContext";

const ProductState = (props) => {
    const host = "http://localhost:5000"
    const productInitial = []

    const [product, setProduct] = useState(productInitial);
    
    // 添加产品函数
    const addProduct = async (name, description, price, category, image) => {
        console.log("adding a new note");
        const url = `${host}/api/Imageprac/upload`;
        
        try {
            const response = await fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'auth-token': "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiNjJlZThmMGI4NmU1YzQ5NDZkM2I3NWQ1In0sImlhdCI6MTY1OTgwMTM1NX0.NdR38S1oby9mSzl1zTH-LYYavsJGjwq6OWsPP_q3YvI"
                },
                body: JSON.stringify({ name, description, price, category, image })
            });
            
            // 等待JSON解析完成
            const json = await response.json();
            
            // 构造新产品对象，优先使用后端返回的ID
            const newImage = {
                "_id": json._id || `temp-${Date.now()}`,
                "user": "62ee8f0b86e5c4946d3b75d5",
                "name": name,
                "description": description,
                "price": price,
                "category": category,
                "image": image,
                "date": new Date().toISOString(),
                "__v": 0    
            };
            
            // 更新产品列表
            setProduct([...product, newImage]);
        } catch (error) {
            console.error("添加产品失败:", error);
        }
    }

    return (
        <ProductContext.Provider value={{ product, addProduct }}>
            {props.children}
        </ProductContext.Provider>
    )
}

export default ProductState;

修改说明 #

1. 将newImage的创建和setProduct调用移至addProduct函数内部，确保能访问到函数参数。
2. 给response.json()添加await，保证异步解析完成后再处理数据。
3. 增加try/catch捕获请求异常，避免程序崩溃。
4. 移除组件初始化时执行的冗余代码，确保添加逻辑仅在调用addProduct时触发。
5. 优先使用后端返回的产品ID，保证数据一致性。

内容的提问来源于stack exchange，提问作者Mirza M Azeem