React中useState变量函数内有值，跨函数调用时为空的问题

我通过handleInput函数获取用户输入，用useState()定义了newProduct状态变量。修改输入值更新状态时，console.log()显示newProduct存储了完整信息，但调用向后端发送数据的AddProducts函数时，console.log()却显示newProduct完全为空。

核心代码 #

newProduct的useState定义 #

const [newProduct, setNewProduct] = useState({
    productId: props.Products.allProducts.length + 1,
    name: '',
    category: '',
    price: '',
    OriginalPrice: '',
    description: '',
    Mesurements: '',
    Material: '',
    Color: '',
    Work: '',
    StitchType: '',
    Occasion: '',
    printPattern: '',
    SupplierSKU: '',
    supplier: '',
    CountryOfOrigin: '',
    CareGuide: '',
  });

handleInput函数 #

let name, value;
const handleInput = (e) => {
    name = e.target.name;
    value = e.target.value;
    setNewProduct({ ...newProduct, [name]: value });
    console.log(newProduct) // 此处newProduct看起来包含完整预期信息
}

AddProducts函数 #

const AddProducts = async (e) => {
    console.log(newProduct); // 此处newProduct完全为空，不符合预期
    e.preventDefault();
    if (newProduct.name.length > 0) { // 仅当newProduct有内容时发送数据
      try {
        const res = await fetch('http://localhost:5000/addProduct', {
          method: 'POST',
          withCredentials: true,
          credentials: 'include',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            "productId": newProduct.productId,
            "name": newProduct.name,
            "category": newProduct.category,
            "price": parseInt(newProduct.price),
            "OriginalPrice": parseInt(newProduct.OriginalPrice),
            "Images": productImages,
            "description": newProduct.description,
            "Mesurements": newProduct.Mesurements,
            "Material": newProduct.Material,
            "Color": newProduct.Color,
            "ColorVariant": colorVariantInputs,
            "Size": newProduct.sizeAvailable,
            "Work": newProduct.Work,
            "StitchType": newProduct.StitchType,
            "Occasion": newProduct.Occasion,
            "printPattern": newProduct.printPattern,
            "SupplierSKU": newProduct.SupplierSKU,
            "supplier": newProduct.supplier,
            "CountryOfOrigin": newProduct.CountryOfOrigin,
            "CareGuide": newProduct.CareGuide
          })
        }).then((response) => { return response.json() })
          .then((data) => {
            if (data) { }
          })
      } catch (error) { }
    }
  }

日志对比 #

handleInput中的newProduct日志 #

AddProducts中的newProduct日志 #

问题原因及解决方法 #

1. 状态更新依赖闭包导致的旧值问题 #

setNewProduct是异步操作，直接在handleInput中使用{ ...newProduct, [name]: value }会因为闭包捕获旧的state引用，导致状态更新不彻底。改用函数式更新确保拿到最新的状态：

const handleInput = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    // 用prevState获取最新状态
    setNewProduct(prevState => ({ ...prevState, [name]: value }));
}

2. 确保AddProducts获取最新状态 #

如果AddProducts作为回调传递给子组件，或者在复杂渲染逻辑中，需要用useCallback包裹并添加正确的依赖项，避免函数捕获旧的state：

import { useCallback } from 'react';

const AddProducts = useCallback(async (e) => {
    e.preventDefault();
    console.log(newProduct);
    if (newProduct.name.length > 0) {
      // 原请求代码保持不变
    }
}, [newProduct]); // 依赖newProduct，状态更新时函数自动更新

3. 正确验证状态变化 #

不要在setNewProduct后立即console.log(newProduct)，因为状态更新是异步的，浏览器console会动态更新对象引用，导致误判。用useEffect监听状态变化来验证：

import { useEffect } from 'react';

useEffect(() => {
    console.log('最新的newProduct状态:', newProduct);
}, [newProduct]);

4. 检查组件是否意外重新挂载 #

如果组件因为key属性变化、父组件强制重新渲染等原因意外挂载，会重置useState的初始值。检查组件的key设置，或父组件的渲染逻辑，避免不必要的重新挂载。

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