React useState更新后状态未变更问题求助

问题根源 #

你遇到的问题核心原因：

• 组件初始化时，formValues第一个对象的property值是当时的propertyID.property（初始为0对应的空值/undefined），React的useState初始值仅执行一次，后续propertyID更新后，这个旧值不会自动同步。
• 新增字段时调用addFormFields，此时propertyID已经是接口返回的最新值，所以新增对象的property能拿到正确值，导致只有新增字段状态正常。

解决方案 #

方案1：监听propertyID变化，同步更新第一个字段的property #

添加useEffect监听propertyID的变化，当它更新时手动修正formValues第一个元素的property值：

import { useState, useEffect } from 'react';

export default function AddProp() {
  const [propertyID, setPropertyID] = useState(0);   
  const [step,setStep] = useState(1);   
  const [values,setValues] = useState({  
    responseMessage: "",
    loading: false,
    name: "",
    address: "",
    county: "",
    city: "",
    zipcode: "",
    type: "",
    specifictype: "",
  });

  // 初始化时property设为空，后续通过useEffect更新
  const [formValues, setFormValues] = useState([
    { number_of_units: "", market_rent: "", square_feet: "", beds: "", property: "" },
  ]);

  // 监听propertyID变化，更新第一个字段的property
  useEffect(() => {
    if (propertyID?.property) {
      setFormValues(prevFormValues => {
        if (prevFormValues.length === 0) return prevFormValues;
        const updatedFirstField = { ...prevFormValues[0], property: propertyID.property };
        return [updatedFirstField, ...prevFormValues.slice(1)];
      });
    }
  }, [propertyID]);

  let addFormFields = () => {
    setFormValues(prev => [
      ...prev,
      { number_of_units: "", market_rent: "", square_feet: "", beds: "" , property: propertyID.property},
    ]);
  };
   
  let sendProperties = async () => {
    try {
      const response = await axios.post(
        "http://127.0.0.1:8000/property/api/v1/addProperty/",
        {
          property_name: values.name,
          address: values.address,
          county: values.county,
          city: values.city,
          zipcode: values.zipcode,
          property_type: values.type,
        },
        { headers: headers }
      );
      setPropertyID(response.data);
      if (response.status === 200) {        
        // 用函数式更新step，避免闭包问题
        setStep(prevStep => prevStep + 1);
      } else {
        alert("An error occurred");
      }
    } catch (err) {
      alert("请求失败：" + err.message);
    }
  };

  // ... 原有switch渲染逻辑
}

方案2：子组件动态使用最新propertyID（更简洁） #

如果PropertyType子组件支持外部传参，可以不在formValues里存储property，而是在子组件中直接使用最新的propertyID.property：

// 在AddProp的case 3中传递propertyID
case 3:
  return (
    <PropertyType
      values={formValues}
      currentProperty={propertyID.property} // 传递最新property值
      handleChange={handleFormChange}
      add={addFormFields}
      remove={removeFormFields}
      prevStep={prevStep}
      nextStep={getandSend}
    />
  );

之后在PropertyType组件处理表单提交时，直接使用传入的currentProperty即可，无需依赖formValues中的旧值。

额外优化点 #

• 给sendProperties添加try/catch捕获请求异常，避免未处理的Promise错误。
• 更新setStep时使用函数式更新，避免闭包导致的旧值引用问题。

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