从功能组件中的另一个上下文状态创建状态答案

【问题标题】：Create State from another context state in function component从功能组件中的另一个上下文状态创建状态
【发布时间】：2022-12-15 12:35:09
【问题描述】：

我正在尝试从上下文中获取状态并初始化为新状态。但是新创建的状态没有初始化。帮帮我。

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;

Form 组件获取未定义的值。该值未正确初始化。

【问题讨论】：

标签： javascript reactjs react-hooks react-context

【解决方案1】：

useState 是异步的。使用 useEffect 查看更新后的值

useEffect(() => {  
   console.log(productName)   
}, [productName])

【讨论】：