反应 formik 监听嵌套数组 prop 对象的更改

Question

我正在使用formik，我的表单模式是这样的

const FormSchema = Yup.object().shape({
  id: Yup.number(),
  myNumber: Yup.number(),
  name: Yup.string().required("Required"),
  products: Yup.array().of(
    Yup.object().shape({
      productName: Yup.string().required('Product Name is required').min(3, "Minimum 3 characters required."),
      supplier: Yup.string().nullable(),
      basePrice: Yup.number().required("Required").positive("Should be greater than 0"),
      rentPrice: Yup.number().required("Required").positive("Should be greater than 0"),
    })
  ),

});

现在可以有多个产品，并且每个产品都有

basePrice

。如果任何产品的

basePrice

有变化，我想听听变化，并基于此我正在更新

rentPrice

useEffect(() => {
    
}, [formikAgreementForm.values.products]);

类似这样的东西，但仅限于

basePrice

Answer 1

是的，您可以通过修改“useEffect”中的更改并检查任何产品的“basePrice”中的更改来实现此目的。

更新代码：

const { values, setFieldValue } = useFormikContext();

useEffect(() => {

  const productBasePriceChanged = values.products.some((product, index) => {

    const currentBasePrice = values.products[index].basePrice;
    const previousBasePrice = formikAgreementForm.values.products[index].basePrice; 

    return currentBasePrice !== previousBasePrice;
  });

  if (productBasePriceChanged) {
    const updatedProducts = values.products.map((product) => ({
      ...product,
      rentPrice: calculateRentPrice(product.basePrice), 
    }));

    setFieldValue('products', updatedProducts);
  }

}, [values.products, formikAgreementForm.values.products, setFieldValue]);



const calculateRentPrice = (basePrice) => {
    return basePrice * 5 //({5} => it should be anything depend on your calculations); 
  };