React函数组件中从Context初始化State失败求助

我尝试从Context中获取状态并初始化到新的本地State中，但新创建的State未能正确初始化，Form组件接收到的值是undefined。相关代码如下：

import { ProductsContext } from "../../../store/ProductsContext";


const EditVariant = () => {
  let { id } = useParams();
  const navigate = useNavigate();
  const { getProductsById, singleProduct } = useContext(ProductsContext);

  const [productName, setProductName] = useState(singleProduct.productName);
  console.log(productName)  // This is undefined

  useEffect(() => {
    getProductsById(id);
  }, []);

  return (

          <Form
            productName={productName}
            setProductName={setProductName}
          /> 
   
    </div>
  );
};

export default EditVariant;

原因分析 #

1. 组件首次渲染时，getProductsById还未执行（它在useEffect中异步触发），此时singleProduct是初始值（大概率为undefined），所以useState(singleProduct.productName)会把productName初始化为undefined。
2. useState的初始值仅在组件第一次渲染时生效，后续singleProduct更新后，不会自动同步到本地的productName状态。

解决方案 #

方案一：监听Context状态变化，同步更新本地State #

添加一个useEffect监听singleProduct的变化，当数据加载完成后手动更新本地productName：

import { ProductsContext } from "../../../store/ProductsContext";
import { useState, useEffect, useContext } from "react";
import { useParams, useNavigate } from "react-router-dom";

const EditVariant = () => {
  let { id } = useParams();
  const navigate = useNavigate();
  const { getProductsById, singleProduct } = useContext(ProductsContext);

  // 先初始化空字符串，避免undefined
  const [productName, setProductName] = useState("");

  // 首次加载获取产品数据
  useEffect(() => {
    getProductsById(id);
  }, [id]);

  // 当singleProduct更新时，同步到本地State
  useEffect(() => {
    if (singleProduct?.productName) {
      setProductName(singleProduct.productName);
    }
  }, [singleProduct]);

  return (
    <div>
      <Form productName={productName} setProductName={setProductName} />
    </div>
  );
};

export default EditVariant;

方案二：直接使用Context状态，不维护本地State #

如果Form组件不需要独立的状态管理，可以直接把Context中的singleProduct.productName传给Form，修改时调用Context提供的更新方法（需要确保Context中暴露了更新状态的方法）：

import { ProductsContext } from "../../../store/ProductsContext";
import { useEffect, useContext } from "react";
import { useParams, useNavigate } from "react-router-dom";

const EditVariant = () => {
  let { id } = useParams();
  const navigate = useNavigate();
  // 假设Context提供了updateProductName方法用于更新产品名称
  const { getProductsById, singleProduct, updateProductName } = useContext(ProductsContext);

  useEffect(() => {
    getProductsById(id);
  }, [id]);

  // 包装Context的更新方法，适配Form组件的调用方式
  const handleSetProductName = (newName) => {
    updateProductName(newName);
  };

  return (
    <div>
      <Form 
        productName={singleProduct?.productName || ""} 
        setProductName={handleSetProductName} 
      />
    </div>
  );
};

export default EditVariant;

注意事项 #

• 使用可选链操作符?.访问singleProduct.productName，避免在singleProduct未加载完成时抛出Cannot read properties of undefined错误。
• 确保getProductsById函数内部正确处理了异步请求，并在数据返回后更新了Context中的singleProduct状态。

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